Perancangan dan Pemrograman Web

Presentasi berjudul: "Perancangan dan Pemrograman Web"— Transcript presentasi:

1 Perancangan dan Pemrograman Web
Konsep dasar Web Arsitektur Web HTTP Client Side Programming Server Side Programming Web Server Software (PHPTriad, XAMPP) Konsep HTML Desain Web Pertemuan 1

2 Persentase Nilai Tugas 40% UTS Project 30% UAS Project 30%

3 Topik Mata Kuliah (Teori)
Pengenalan Pemrograman Web HTML CSS MYSQL PHP Programming Perkembangan Teknologi Web

4 Outcomes mata kuliah Mahasiswa diharapkan mampu menguasai :
HTML,CSS,MYSQL dan PHP Mahasiswa diharapkan dapat membuat sebuah website lengkap dengan menggunakan komponen diatas dimana , HTML dan CSS digunakan sebagai design, MySql sebagai database serta PHP sebagai programming language

5 Arah Pembelajaran (Praktikum)
Pembelajaran akan dilakukan sebanyak 2 hari dalam seminggu , satu hari untuk teori dan satu hari untuk praktek. Teori : digunakan sebagai pengenalan dari matakuliah serta pendalaman materi dan perkembangan teknologi web Praktikum : digunakan sebagi wadah untuk menciptakan produk website

6 Sesi Praktikum Sesi Praktikum pertemuan 1 -7 akan mendalami pembuatan website menggunakan html , css untuk menunjang project untuk UTS Sesi pertemuan 8-14 akan mendalami pembuatan website dengan PHP programming dan MySQL untuk menunjang project UAS

7 Definisi Web World Wide Web ("WWW", atau singkatnya "Web") adalah suatu ruang informasi di mana sumber-sumber daya yang berguna diidentifikasi oleh pengenal global yang disebut Uniform Resource Identifier (URI). WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripadanya. Hiperteks dilihat dengan sebuah program bernama browser web yang mengambil informasi (disebut "dokumen" atau “halaman web") dari server web dan menampilkannya, biasanya di sebuah monitor

8 Konsep Dasar Web Internet
Adalah kumpulan dari berbagai jaringan komputer yang saling interkoneksi yang mencakup seluruh dunia (jaringan global) dengan melalui jalur telekomunikasi seperti telepon, fiber-optic, wireless dan lainnya.

9 WWW Adalah salah satu bentuk layanan yang dapat diakses melalui internet. Biasa disingkat sebagai Web. Merupakan sekumpulan dokumen, gambar-gambar, dan bentuk resources yang lainnya yang dihubungkan melalui hyperlinks dan URLs.

10 Protokol Merupakan bahasa/software standar untuk mengatur komunikasi jaringan komputer TCP/IP (Transmission Control Protocol / Internet Protocol) merupakan cara standar untuk mempaketkan dan menyelamatkan data komputer (sinyal elektronik) sehingga data tersebut dapat dikirim ke komputer yang lain.

11 HTTP (Hypertext Transfer Protocol)
Adalah protokol yang menentukan aturan yang perlu diikuti oleh web browser dalam meminta dan mengambil suatu dokumen oleh web server dalam menyediakan dokumen yang diminta web browser. Protokol ini merupakan protokol standar yang digunakan untuk mengakses dokumen HTML

12 Contoh Http Contoh Transaksi S = Server C = Client
C : (Inisialisasi koneksi) C : GET /index.htm HTTP/1.1 C : Host: S : 200 OK S : Mime-type: text/html S : S : -- data dokumen -- S : (close connectioin)

13 URL (Uniform Resource Locator)
Digunakan untuk menentukan lokasi informasi pada suatu web server. Dapat diibaratkan sebagai suatu alamat, yang terdiri dari: Protokol yang digunakan oleh suatu browser untuk mengambil informasi Nama komputer (server) dimana informasi tersebut berada Jalur/path serta nama file dari suatu informasi

14 Protokol_transfer://nama_host/path/nama_file
Format umum URL: Protokol_transfer://nama_host/path/nama_file Contoh: Keterangan: http ->protokol yang digunakan -> nama host atau server komputer shop -> jalur/path dari informasi yang dicari index.html -> nama file

15 Protokol Transfer adalah protokol yang digunakan untuk pengiriman informasi di internet. Beberapa protokol transfer: HTTP  protokol standar untuk suatu dokumen web FTP (File Transfer Protocol)  digunakan untuk mentransfer file dalam format text atau binary dalam suatu server komputer diinternet. Gopher  digunakan untuk mengakses server gopher yang menyediakan informasi dengan menggunakan suatu sistem menu atau melalui hubungan telnet. News NNTP (Network News Transfer Protocol)  digunakan untuk mendistribusikan berita di USENet. USENet adalah suatu sistem yang dirancang sebagai forum diskusi dengan berdasarkan pada topik-topik yang disebut news-group. Telnet  digunakan untuk login ke suatu server komputer.

16 DNS (Domain Name System)
Adalah suatu sistem penamaan standar komputer-komputer di internet dengan tujuan untuk mempermudah pengelolaan server komputer internet. Merupakan suatu tingkat-tingkat domain, yang merupakan kelompok komputer-komputer yang terhubung ke internet.

17 Homepage Website (situs web)  merupakan alamat (URL) yang berfungsi sebagai tempat penyimpanan data dan informasi dengan berdasarkan topik tertentu. Web Page (halaman web)  merupakan halaman khusus dari situs web tertentu yang tersimpan dalam bentuk file. Dalam web page tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lain baik itu dalam page yang sama ataupun web page lain pada website yang berbeda. Home page  merupakan sarana dasar untuk memperkenalkan secara singkat tentang apa yang menjadi isi dari keseluruhan website dari suatu organisasi atau pribadi.

18 Server dan Client Dalam dunia internet selalu terdapat dua sisi yang saling mendukung, yaitu: Server  penyedia berbagai layanan termasuk web. Layanan web ditangani oleh sebuah aplikasi bernama web server. Client  bertugas mengakses informasi yang disediakan oleh server. Pada layanan web, client dapat berupa web browser.

19 Web Browser Berjalan pada komputer user
Merupakan tool untuk melakukan navigasi di web Menampilkan dokumen web Contoh-contoh: MS Internet Explorer  Windows Netscape Navigator/Communicator  Multi Opera  Multi Conqueror  Linux Lynx  Unix

20 Web Server Berjalan pada komputer server
Sebagai tempat menyimpan file-file dokumen web sehingga dapat diakses oleh pengguna internet Contoh-contoh: Apache  Multi MS Intenet Information Server (IIS)  Windows Tomcat (for Java)  Multi

21 Web Programming Web dapat dikategorikan menjadi dua, yaitu web statis
web yang menampilkan informasi-informasi yang sifatnya statis (tetap) web dinamis atau interaktif. web yang menampilkan informasi serta dapat berinteraksi dengan user yang sifatnya dinamis. Sehingga untuk membuat web dinamis dibutuhkan kemampuan pemrograman web.

22 Dua kategori web programming:
Server Side Programming Client Side Programming

23 Server Side Programing
Server-side scripting adalah teknologi web server di mana permintaan pengguna terpenuhi dengan menjalankan script langsung pada server web untuk menghasilkan halaman HTML dinamis. Hal ini biasanya digunakan untuk menyediakan situs web interaktif yang antarmuka ke database atau menyimpan data lainnya

24 Server-side Programming
Server Side Programming  web server melakukan parse dan eksekusi sehingga script embedded dalam halaman web Contoh: CGI/Perl, ASP, JSP, PHP, CFM

25 Client Side Programming
Dalam jaringan komputer, kata “client side” mengacu kepada operasi yang dilakukan oleh client pada satu hubungan “client-server” . Secara umum, suatu client adalah satu aplikasi komputer, seperti web browser yang berjalan pada satu komputer lokal dari pengguna atau workstation dan terhubung ke satu server seperlunya.

26 Client-side Programming
Client Side Programming  web browser melakukan parse dan eksekusi sehingga script embedded dalam halaman web Contoh: JavaScript, HTML, VBScript

27 Web Server Software Server web adalah sebuah perangkat lunak server yang berfungsi menerima permintaan HTTP atau HTTPS dari klien yang dikenal dengan browser web dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML. Server web yang terkenal diantaranya adalah Apache dan Microsoft Internet Information Service (IIS). Apache merupakan server web antar-platform, sedangkan IIS hanya dapat beroperasi di sistem operasi Windows. Server web juga dapat berarti komputer yang berfungsi seperti definisi di atas.

28 Pengenalan HTML Adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML, HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web dan HTML kini merupakan standar Internet yang saat ini dikendalikan oleh World Wide Web Consortium (W3C).

29 HTML? singkatan dari HyperText Markup Language
menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen. Software yang diperlukan: Text editor sederhana. Contoh: Windows: Notepad Linux: gEdit, mcedit, pico, dan vi. Web browser untuk menampilkan dokumen web yang dibuat. Windows: Internet Explorer, Opera dan Firefox Linux: Firefox dan Conqueror.

30 Istilah-istilah dalam HTML:
Tag - Digunakan untuk menentukan tingkah laku web browser. Dinyatakan dengan tanda lebih kecil “<“ (tag awal) dan tanda lebih besar “>” (tag akhir).Tag kontainer: <namatag> </namatag> Element – Jenis-jenis dari tag. HTML mempunyai banyak elemen untuk berbagai keperluan dengan berbagai bentuk penggunaan. Attribute - Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut.

31 Kerangka dokumen HTML Sintaknya sebagai berikut : <html> <head> <title>………………</title> </head> <body> ……………… </body> </html>

32 Kerangka Dokumen HTML HTML
Untuk penanda bahwa dokumen yang dibuat adalah dokumen web Head Header menjelaskan properti dari dokumen HTML, diantaranya adalah judul dan hubungan dengan dokumen html yang lain. Title merupakan komponen dari Tag Head, yang digunakan untuk mendiskripsikan header halaman web.

33 Kerangka dokumen HTML Body
Body dari suatu dokumen HTML merupakan tempat diletakannya isi dari dokumen html tersebut. Atribut untuk tag <body> diantarnya adalah BACKGROUND,BGCOLOR

34 Contoh dan cara penyimpanan
<html> <head> <title>Latihan 1</title> </head> <body> Hallo Saya HTML </body> </html>

35

36 Komentar Komentar adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan komentar dalam kode HTML adalah sebagai keterangan yang berguna bagi pembaca kode. Sebuah keterangan diawali dengan <!- dan diakhiri dengan ->. Di dalam kedua tanda tersebut, Anda bisa memberikan keterangan apa saja dan bahkan bisa mencakup beberapa baris. Cara penulisan : <!--Keterangan ini tidak ditampilkan di browser-->

37 Contoh yang menggunakan keterangan
<html> <head> <title>Latihan 1</title> </head> <body> Hallo Saya HTML <!- ini keterangannya -> </body> </html>

38

39 Tag tag dasar dalam html
<head> <title> <body> <br> <p> <hr> &nbsp <h1> sampai <h6>

40 Latihan 1 Sebutkan jenis jenis situs yang anda ketahui?
Elemen apa saja yang ada di dalam sebuah situs yang anda ketahui, jelaskan fungsinya Menurut anda situs website seperti apa yang baik?