Selamat datang kembali.
Jadi kami telah mempelajari dasar-dasar flask, kami memahami apa yang dilakukan server dan kami juga tahu apa yang dilakukan
browser.
Tapi mari kita jujur di sini.
Ini agak membosankan.
Maksudku, ini tidak mengesankan.
Jika Anda menunjukkan ini kepada calon majikan, mereka akan melihat Anda seperti orang gila.
Jadi mari kita benar-benar membangun portofolio yang terlihat bagus hanya berdasarkan apa yang telah kita pelajari sampai sekarang.
Sekarang aku punya hadiah kecil untukmu.
Itulah fakta bahwa Anda tidak perlu menulis HTML dan JavaScript Anda sendiri karena, sekali lagi, ini bukan kursus
pengembangan Web.
Dan untungnya bagi kami, jika Anda Google dan Anda sedang online untuk sesuatu seperti templat gratis atau templat gratis
HTML, Anda dapat menemukan beberapa situs web yang tampak sangat bagus yang dapat Anda gunakan secara gratis.
Sebagai contoh, mari kita lihat alam semesta di sini dan saya akan menautkan ke sumber ini sehingga Anda
dapat melihatnya sendiri juga jika saya mempratinjaunya.
Lihat itu, Anda memiliki situs web kecil yang bagus atau halaman portofolio yang bisa Anda gunakan.
Betapa kerennya itu, dan sebenarnya sudah ramah tablet dan seluler, jadi semuanya sudah dibuat sebelumnya untuk Anda.
Itu cukup keren, bukan?
Jadi bagaimana kita bisa menggunakan ini?
Baiklah, mari kita unduh saja dan omong-omong, saat Anda mengikuti, Anda benar-benar dapat menggunakan salah satu dari ini
yang Anda inginkan.
Tapi untuk saat ini, mari kita gunakan universe satu saja, karena ada astronot kecil di sini, kelihatannya cukup
keren.
Mari kita unduh ini dan lihat apa yang terjadi.
Baiklah.
Saya mendapat sedikit pertanyaan yang mengatakan, bagaimana kita ingin mengunduh template?
Dalam kasus kami, kami ingin memilih HTML.
Dan begitulah, kami mendapatkan folder Zeph kecil yang bagus dan sekarang kami telah mengunduhnya, jadi mari kita buka
ini.
Dan oh, nak, itu banyak sekali file dan folder.
Jadi apa yang harus kita ambil dari sini?
Nah, ada beberapa hal.
Pertama, ini adalah halaman contoh, kami sebenarnya tidak membutuhkan ini, jadi mari kita pindahkan ke sampah.
Selanjutnya, kami memiliki aset.
Ini adalah aset yang berbeda agar halaman kita berfungsi, seperti halaman astronot.
Jadi kami akan menyimpannya.
Dan kemudian kami memiliki halaman HTML kami.
Yang pasti kita butuhkan.
Dan sepertinya kita memiliki beberapa file JavaScript dan file CSS.
Sekarang ada dot gov di sini, yang kami sebut sebagai file terkompresi, file terkompresi G zip.
Jadi ini hanya cara server untuk mengirim file atau file JavaScript, yang dapat Anda lihat adalah seratus tiga
puluh delapan kilobyte, tetapi dalam bentuk terkompresi, jadi empat puluh empat kilobyte.
Jadi dengan cara ini kami mengirimkan lebih sedikit data ke front end.
Dan kemudian kami juga memiliki sesuatu seperti peta yang benar-benar membantu kami selama debugging.
Tetapi dalam kasus kami, kami tidak perlu khawatir tentang hal ini untuk saat ini.
Jadi mari kita hapus saja semua file gipped dan map.
Jadi kita akan memindahkannya ke tempat sampah sehingga kita hanya memiliki satu file dan satu file JavaScript dan kemudian yang lainnya
adalah file HTML untuk halaman kita yang berbeda.
Sekarang, yang akan kita lakukan adalah menyalin ini dan memindahkannya ke folder proyek kita.
Ingat folder ini di sini?
Jadi idealnya, kami memindahkan file ASML ke dalam template dan file statis.
Itu adalah file CSIS dan JavaScript dan mungkin aset di sini.
Jadi itulah gambar-gambar di sini.
Jadi mari kita lakukan itu.
Saya memiliki server Web saya di sini.
Pertama-tama saya akan menyalin dan menempelkan apa yang baru saja kita salin.
Dan mari kita pindahkan semua file HTML kita.
Ke dalam template kami.
Dan tahukah Anda, mari kita hapus juga template yang ada, karena kita tidak membutuhkannya lagi, kita
memiliki Fana HTML yang cantik.
Dan kemudian hanya memiliki semua ini, kami memiliki indeks HMO baru yang akan jauh lebih cantik daripada situs web
lama kami, jadi kami ingin menggunakannya.
Jadi mari kita pindahkan semua itu ke dalam template.
Dan kemudian mari kita lakukan pekerjaan dan sukses serta folder aset menjadi statis.
Luar biasa.
Jadi sekarang setelah kita menyiapkannya, mari kembali ke proyek kita dan lihat itu.
Kami memiliki lebih banyak email yang belum kami kunjungi, tapi untungnya sudah dibuat untuk kami.
Sekarang, pengaturan terakhir adalah karena kita memindahkan file, kita perlu menyesuaikan tautan antara HTML,
CSS, JavaScript, dan semua file aset.
Jadi jika kita gulir, yang kita masuki ke HTML yang diindeks.
Kami melihat bahwa kami sedang mencari Vatikan di aset Vatikan, tetapi karena ini ada di folder statis, kami harus
menambahkan statis di sini.
Jadi mari kita cari tahu di mana lagi kita menggunakan aset di sini.
Baiklah, jadi sepertinya mari kita buat ini sedikit lebih besar.
Jadi sepertinya di sini untuk gambar latar belakang kita.
Kami sekali lagi mencari gambar ruang, tetapi itu seperti yang kami ketahui di folder statis dan mari kita
lihat di mana lagi yang kami miliki di sini dan juga statis.
Mari kita terus statis Baiklah.
Semuanya baik-baik saja.
Sekarang kita memiliki folder statis dan kita harus memastikan bahwa kita menambahkan garis miring di depan titik.
Dot hanya berarti direktori saat ini dan kemudian lihat di folder statis.
Jadi mari kita kembali, pastikan kita melakukan itu untuk semuanya.
Di sana kita pergi.
Dan di sana kita pergi.
Sekarang, mari kita simpan ini, dan saya rasa kita belum sepenuhnya selesai, tetapi untuk sekarang, mari masuk
ke server kita, DCPI.
Dan untuk rute rumah kita, mari kita hapus apa yang sudah kita miliki sebelumnya.
Dan sebut saja fungsi rumah saya yang tidak mengambil parameter dan sebaliknya itu hanya akan kembali untuk kita.
Email indeks kami tanpa parameter Pastan.
Jadi mari kita simpan kembali ke halaman kita.
Atau situs web saya dan lihat apa yang kami dapatkan saat kami menyegarkan.
Baiklah, itu situs web yang cantik, sangat jelek, tapi sepertinya setidaknya kami menampilkan sesuatu, tapi segera
kami perhatikan, hmm, sepertinya tidak ada keberhasilan yang diterapkan.
Sepertinya kami memiliki beberapa email, tetapi tautannya juga tidak berfungsi.
Jadi sekali lagi, ini karena kita harus memperbarui tautan antar file.
Jadi yang akan kita lakukan sebenarnya adalah kembali ke studi indeks dan di tag head, kita melihat bahwa kita memiliki file akses
stylesheet kita.
Tetapi sekali lagi, kita harus memperbarui ini untuk memilikinya dalam keadaan statis.
Map.
Seperti halnya file JavaScript, yang jika kita gulir ke bawah, kita memiliki file di sini, yang
sekali lagi akan berada di folder statis.
Baiklah, mari kita simpan.
Dan kembali dan lihat apakah itu membuat segalanya lebih baik.
Dan lihat itu, itu sangat keren.
Pikiran Anda, ini terlihat agak besar karena saya memperbesar ukuran situs web saya dengan melakukan perintah plus dan minus
supaya kita bisa melihat lebih baik.
Tapi itu cukup mengagumkan.
Nah, kalau saya klik katakanlah berhasil, hmm, saya mendapatkan pekerjaan belajar HTML tidak ada.
Jadi bagaimana kita bisa memperbaikinya?
Kita sudah tahu bagaimana melakukannya, bukan?
Yang perlu kita lakukan adalah memperbarui rute yang berbeda ini sehingga mengarah ke template yang sesuai.
Sekarang di video berikutnya, saya akan menunjukkan cara melakukannya.
Tetapi saya ingin Anda mencoba melakukannya sendiri, karena kita telah mempelajarinya sekarang.
Jadi cobalah untuk membuat situs web berfungsi persis seperti yang kami miliki.
Di sini, di template mash up kami, dan sampai jumpa di video berikutnya.