More Related Content
Similar to Pemprograman web & perangkat bergerak.pptx (20)
More from nurulfalifah (8)
Pemprograman web & perangkat bergerak.pptx
- 1. PEMPROGRAMAN WEB & PERANGKAT BERGERAK - Nurul Fajrin Alifah, S.T -
- 2. KONSEP DASAR WEB Website merupakan Kumpulan halaman digital yang berisi informasi berupa teks, animasi, gambar, suara dan video atau gabungan dari semuanya yang terkoneksi oleh internet, sehingga dapat dilihat oleh siapapun yang memiliki jaringan internet. 1. PengertianWebsite
- 3. KONSEP DASAR WEB a) Web Statis, merupakan website yang mempunyai halaman yang tidak berubah. Perubahan suatu halaman dilakukan secara manual dengan mengedit code yang menjadi struktur dari website tersebut. b) Web Dinamis, merupakan website yang secara terstruktur diperuntukan untuk diupdate sesering mungkin. Biasanya disediakan halaman backend(admin) untuk melakukan perubahan konten dari website tersebut c) Web Interaktif, merupakan website yang berinteraksi antara setiap penggunanya. Biasanya berupa forum diskusi maupun blog. 2. Kategori Website
- 4. KONSEP DASAR WEB Pemprograman web merupakan pembuatan aplikasi program dengan Bahasa skrip yang akan menghasilkan sebuah aplikasi yang dapat diakses pada web browser. 3. PemprogramanWeb
- 5. KONSEP DASAR WEB a) HTML b) CSS c) Javascript d) PHP 4. Bahasa Skrip PemprogramanWeb
- 6. KONSEP DASAR WEB a) Internet Merupakan jaringan yang berfungsi untuk menghubungkan antara satu media elektronik/perangkat dengan perangkat lainnya. 5. Istilah-istilah dalam Pemprograman Web
- 7. KONSEP DASAR WEB b) World Wide Web (WWW) Merupakan Kumpulan web server diseluruh dunia yang dapat menyediakan data dan informasi untuk dapat digunakan secara massal/besar/global. 5. Istilah-istilah dalam Pemprograman Web
- 8. KONSEP DASAR WEB c) Web Server Merupakan perangkat lunak (software) yang digunakan untuk menerima permintaan (request) melalui protocol HTTP atau HTTPS dari client, kemudian dikirimkan Kembali dalam bentuk halaman-halaman web (response). Contoh web server : Xampp 5. Istilah-istilah dalam Pemprograman Web
- 9. KONSEP DASAR WEB d) URL (Universal Resource Locator) Merupakan suatu Alamat yang menunjukkan sebuah halaman tertentu internet. Contoh URL : http://www.google.com 5. Istilah-istilah dalam Pemprograman Web
- 10. KONSEP DASAR WEB e) HTTP (Hypertext Transfer Protocol) HTTP adalah sebuah protocol jaringan aplikasi yang digunakan untuk mendistribusikan informasi antara server dan client. HTTP merupakan bagian dari URL yang digunakan untuk mengidentifikasi Lokasi web. Sedangkan Hypertext Transfer Protocol Secure (HTTPS) merupakan hasil pengembangan dari versi HTTP sebelumnya, HTTPS memiliki fungsi keamanan yang lebih ketat sehingga membuat client merasa aman dalam mengakses berbagai konten web. 5. Istilah-istilah dalam Pemprograman Web
- 11. KONSEP DASAR WEB f) DNS (Domain Name System) Merupakan komponen protokol standar internet yang bertanggung jawab untuk mengubah nama domain yang mudah dipahami manusia menjadi alamat Internet Protocol (IP) yang digunakan komputer untuk mengidentifikasi satu sama lain di jaringan. 5. Istilah-istilah dalam Pemprograman Web
- 12. KONSEP DASAR WEB g) IP ( Internet Protocol) Merupakan protocol yang digunakan dalam internet, secara teknis bermakna suatu bentuk pengisian dan pengalamatan data-data dan informasi yang akan dikirim melalui internet. 5. Istilah-istilah dalam Pemprograman Web
- 13. KONSEP DASAR WEB h) Hyperlink Hyperlink atau link merupakan sebuah teks yang akan menghubungkan antar halaman situs internet. 5. Istilah-istilah dalam Pemprograman Web
- 14. KONSEP DASAR WEB i) Web Browser Merupakan perangkat lunak (software) aplikasi yang digunakan untuk mencari, mengakses, dan menampilkan website. Contohnya : Google chrome Microsoft Edge Opera Mini Mozilla Firefox Safari 5. Istilah-istilah dalam Pemprograman Web
- 15. KONSEP DASAR WEB Struktur Navigasi adalah bagan hirarki dari suatu website yang menggambarkan isi dari setiap halaman dan link. Struktur Navigasi dapat dikatakan sebagai gambaran dari hubungan atau rantai kerja dari seluruh elemen yang akan digunakan dalam aplikasi Dalam penggambarannya Struktur Navigasi terbagi kedalam 4 Struktur yang berbeda yaitu: a) Linier, b) Non Linier, c) Hierarchical (Hirarki), dan d) Composit (Campuran) 6. Struktur Navigasi
- 16. KONSEP DASAR WEB a) Linier Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut, yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya. Tampilan yang dapat ditampilkan pada sruktur jenis ini adalah satu halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya atau dua halaman sesudahnya. 6. Struktur Navigasi Struktur Navigasi Linier
- 17. KONSEP DASAR WEB a) Linier 6. Struktur Navigasi Nama Password Login Form Data Siswa Unggah Foto Siswa Unggah Input Data Siswa Nama Alamat Tempat Lahir Tanggal Lahir Simpan Data Siswa Nama Siswa Alamat Siswa Tempat Lahir Siswa Tanggal Lahir Siswa Logout
- 18. KONSEP DASAR WEB b) Non Linier Struktur navigasi non atau struktur tidak berurut merupakan pengembangan dari struktur navigasi linier. Pada struktur ini diperkenankan/dibolehkan membuat navigasi bercabang. 6. Struktur Navigasi Struktur Navigasi Non Linier
- 19. KONSEP DASAR WEB b) Non Linier 6. Struktur Navigasi Nama Password Login Form Data Siswa Unggah Foto Siswa Unggah Input Data Siswa Nama Alamat Tempat Lahir Tanggal Lahir Simpan Data Siswa Nama Siswa Alamat Siswa Tempat Lahir Siswa Tanggal Lahir Siswa Logout Belum punya akun? Register disini Nama Email Daftar Buat Akun Password
- 20. KONSEP DASAR WEB c) Hierarchical (Hirarki) Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan suatu struktur yang mengandalkan percabangan untuk menampilkan data berdasarkan kriteria tertentu. Tampilan pada menu pertama akan disebut sebagai Master Page (halaman utama pertama), halaman utama ini mempunyai halaman percabangan yang disebut Slave Page (halaman pendukung). 6. Struktur Navigasi Struktur Navigasi Hirarki
- 21. KONSEP DASAR WEB d) Composit (Campuran) Struktur navigasi campuran merupakan gabungan dari ketiga struktur sebelumnya yaitu linier, non-linier dan hirarki. Struktur navigasi ini juga biasa disebut dengan struktur navigasi bebas. 6. Struktur Navigasi Struktur Navigasi Campuran
- 22. KONSEP DASAR WEB a) Jenis berdasarkan sifatnya Website Dinamis, merupakan sebuah website yang menyediakan konten atau isi yang selalu berubah-ubah setiap saat. Misalnya website berita seperti Kompas.com, detik.com, dll. Website Statis, merupakan website yang isi/kontennya sangat jarang diubah dan untuk mengubahnya memerlukan pengetahuan coding. Contohnya website profil perusahaan 7. Jenis-jenisWebsite
- 23. KONSEP DASAR WEB b) Jenis berdasarkan tujuannya PersonalWeb, website yang berisi informasi pribadi seseorang Corporate Web, website yang dimiliki oleh sebuah Perusahaan Portal Web, website yang mempunyai banyak layanan, mulai dari layanan berita, email, dal jasa-jasa Forum Web, sebuah web yang bertujuan sebagai media untuk saling diskusi/bertukar pendapat Dll. 7. Jenis-jenisWebsite
- 24. KONSEP DASAR WEB c) Jenis berdasarkan segi Bahasa pemprograman yang digunakan Server Side, website yang menggunakan Bahasa pemprograman yang bergantung kepada sebuah server untuk menerjemahkan kode-kode pemprograman web, seperti : PHP, ASP, dan sebagainya. Jika tidak ada server, maka website yang dibangun menggunakan Bahasa pemprograman tersebut tidak akan dapat berfungsi sebagaimana mestinya. Client Side, website yang langsung dapat dieksekusi dari sisi client saja atau tidak tergantung kepada server, misalnya HTML 7. Jenis-jenisWebsite
- 25. KONSEP DASAR WEB a) Media untuk memperkenalkan diri atau mempromosikan instusi/Lembaga b) Media untuk berkomunikasi, antara Perusahaan dengan clientnya, antara pengelola sekolah dengan siswanya, antara pemerintah dan warganya, atau media komunikasi untuk stake holder yang terkait dengan website tersebut dan Masyarakat umum c) Media untuk berbagi infoemasi d) Media belajar e) Media untuk berbisnis f) Dsb. 8. ManfaatWebsite
- 26. KONSEP DASAR WEB Jika diterjemahkan, secara harfiah Front End adalah bagian depan. Yang Dimana dalam pengembangan web berarti segala sesuatu yang tampil pada bagian depan halaman website yang dapat disaksikan secara langsung oleh user. Misalnya: Desain Warna Tata letak Layout, serta Elemen-elemen pendukung lainnya 9. Front End Development
- 27. KONSEP DASAR WEB HTML merupakan tulang punggung dari pembuatan sebuah web CSS merupakan sebuah style/gaya berupa warna, gambar, font, ukuran, dll untuk memperindah tampilan Javascript digunakan untuk membuat web lebih menarik lagi dengan beberapa fungsi interaktif AnalogiWebsite
- 28. KONSEP DASAR WEB Jika diterjemahkan, secara harfiah Back End adalah bagian belakang. Yang Dimana dalam pengembangan web berarti segala bentuk kode, algoritma, atau sistem yang focus pada pengembangan arsitektur, manajemen konten dan database sebuah web. Contohnya : PHP, Phyton, Ruby, dsb 10. Back End Development
- 29. KONSEP DASAR WEB Artinya adalah seseorang yang dapat menguasai semua Bahasa pemprograman sekaligus mendesainnya sendiri. Atau bisa diartikan merupakan seorang yang menjalankan peranan atau tanggung jawab sebagai front end dan back end sekaligus. 11. Full Stack Development
- 30. KONSEP DASAR WEB
- 31. KONSEP DASAR WEB a) Notepad Notepad adalah aplikasi text editor yang sudah ada didalam instalasi os windows. Yang perlu diperhatikan jika menggunakan notepad sebagai text editor, yakni extension type file dituliskan langsung dan pemilihan save as type adalah All Files. 12.Text Editor
- 32. KONSEP DASAR WEB b) Notepad++ Notepad++ adalah aplikasi teks editor yang memiliki fitur jauh lebih lengkap daripada Notepad. Aplikasi Notepad++ merupakan aplikasi yang disediakan oleh pihak ketiga yang dapat didownload dan digunakan secara gratis 12.Text Editor
- 33. KONSEP DASAR WEB c) Sublime Text Sublime merupakan salah satu text editor yang paling banyak digunakan oleh programmer karena editor ini menawarkan berbagai fitur canggih untuk meningkatkan produktivitas dan efisiensi saat bekerja. 12.Text Editor
- 34. KONSEP DASAR WEB d) Visual Studio Code VS Code adalah editor source code buatan Microsoft yang beroperasi pada komputer desktop dan kompatibel dengan sistem operasi Windows, macOS, dan Linux. VS Code cocok untuk JavaScript, TypeScript, dan Node.js. Selain itu, editor ini memiliki ekosistem extension yang luas yang dapat mendukung berbagai bahasa pemrograman 12.Text Editor
Editor's Notes
- #3: Contohnya : a. Web profil perusahaan b. E-commerce (website untuk transaksi jual-beli), web portal, web berita, dll c. Social media
- #11: Sering disebut buku telepon untuk internet, analogi yang lebih modern adalah DNS mengelola nama domain dengan cara yang sama seperti smartphone mengelola kontak. Smartphone menghilangkan kebutuhan pengguna untuk mengingat nomor telepon setiap orang dengan menyimpannya dalam daftar kontak yang mudah dicari. Demikian juga, DNS memungkinkan pengguna untuk terhubung ke situs web menggunakan nama domain internet alih-alih alamat IP. Daripada harus mengingat server web di 93.184.216.34Z, misalnya, pengguna cukup membuka halaman web www.example.com untuk mendapatkan hasil yang mereka inginkan
- #25: Website mempunyai banyak manfaat karena kemampuannya dalam menyampaikan informasi dalam berbagai cara
- #26: Website telah berkembang semakin kompleks seiring dengan perkembangan teknologi, hal tersebut berarti seorang web developer tidak lagi harus melakukan keseluruhan dari proses pembangunan web sendiri karena sudah terspesialisasi Karena hal tersebut maka terbagilah proses pengerjaan web dalam beberapa bagian
- #27: Website telah berkembang semakin kompleks seiring dengan perkembangan teknologi, hal tersebut berarti seorang web developer tidak lagi harus melakukan keseluruhan dari proses pembangunan web sendiri karena sudah terspesialisasi Karena hal tersebut maka terbagilah proses pengerjaan web dalam beberapa bagian
- #30: Sebagai suatu Kesimpulan, jika diibaratkan sebuah mobil maka: Frontend bertugas untuk membuat desain sampai kepada bentuknya seperti warna, bentuk atap, kaca, dll Backend bertugas untuk membuat mesinnya, misalnya bagaimana jika gas diinjak maka mobil harusnya maju. Jika rem yang diinjak maka mobil harus berhenti Fullstack bertugas membuat mobil secara utuh, yang mana full stack developer telah memahami cara membuat mobil dari awal hingga akhir mulai dari desain sampai mobil bisa berfungsi dan digunakan
- #31: Text editor adalah suatu software yang memungkinkan seseorang untuk membuka, melihat, mengedit file plain text atau teks biasa. Software ini sangat berguna bagi programmer atau developer untuk membaca Bahasa pemprograman. Tidak hanya untuk membaca saja, tapi juga memudahkan untuk menulis kode atau lebih dikenal dengan istilah coding.