Uraian Materi 1 Web Dasar

setiap h dalam dari bro - Sedang dari sua Set atau .html type ke da tersebut ak HTML terse tampilan p pada TIT apa yang halaman w tag-tag ya tampiland BODY … c. Penyunting Berikut in penyunting 1. Headin 2. Garis h 3. Teks m 4. Teks te 5. Teks d 6. Center 7. Paragr 8. Alignm 9. Jenis h 10. Superscr 11. Subscr 12. Listdaf p halaman web memiliki judul, dan judul terse TITLE … TITLE. Judul ini akan muncu browser. - ngkan tag BODY … BODY adalah tag suatu halaman web. etelah tag tersebut di atas ditulis, simpan dal ml misal index.htm akan tetapi terlebih dahulu dalam All Files. Kemudian tentukan letak dir t akan disimpan, selanjutnya klik Save. Selanju ersebut dipanggil dengan browser untuk meliha pada browser di atas, dapat terlihat bahwa a ITLE … TITLE akan muncul pada titleb ng ditulis pada BODY … BODY akan web. Untuk selanjutnya, kita hanya akan yang ada di dalam BODY … BODY desain web tergantung pada tag yang d … BODY. ing Text ini berbagai macam tag yang dapat dig ingan teks. ding s horizontal miring tebal dengan garis bawah ter graf ment Rata kiri, tengah, kanan, justifikasi s huruf erscripts scripts daftar 46 sebut dituliskan di ncul dalam titlebar - tag berisi content dalam format .htm ulu ubah Save as direktori mana file njutnya document lihat hasilnya. Dari a apa yang ditulis ebar browser dan an muncul pada n memperhatikan karena bentuk ditulis di dalam digunakan untuk 47 1. He Fun jud Sin H H H H Ket Co H H TI H B H H1 den B H eading ungsi : untuk membuatmemilih ukuran teks, u udul karena ukurannya yang besar. intaks : H1 … H1, H2 … H2, H3 … H3, sd H6 … H6 et : Semakin besar angka 1 sd 6 maka ukuran hurufnya. ontoh : HTML HEAD TITLEPenyuntingan teks dengan HeadingT HEAD BODY H1Teks ini ditulis dengan 1H1 H2Teks ini ditulis engan H2H2 BODY HTML s, umumnya untuk ka semakin kecil TITLE Co apa 2. Ga Fun lay Sin Co H H T H B H H B H Gambar 19. Tampilan Heading 1 dan hea oba hasilnya Anda lihat di browser, selanjutny pabila digunakan H3…H3, H4…H4 Garis horizontal ungsi : membuat garis horizontal ayarhalaman web Sintaks : HR Contoh : HTML HEAD TITLEGaris HorizontalTITLE HEAD BODY H1Di bawah tulisan ini ada garis horizontal HR BODY HTML 48 eading 2. tnya bandingkan 4, dst. l penuh pada lH1 49 Ke 3. Te Sin Co H H T H B H B H Gambar 20. Tampilan garis horizon Ket : Penulisan HR bisa terletak dibawah su sampingnya. Teks miring Italic Sintaks : I … I Contoh : HTML HEAD TITLEPenyuntingan teks dengan italicTITL HEAD BODY H1ITeks ini ditulis dengan H1 dan miring BODY HTML ontal. suatu teks atau di ITLE gIH1 4. Te Sin Co H H T H B H B H Gambar 21. Tampilan font miring ita Teks tebal bold Sintaks : B … B Contoh : HTML HEAD TITLEPenyuntingan teks dengan boldTITL HEAD BODY H1BTeks ini ditulis dengan H1 dan bold BODY HTML Gambar 22. Tampilan font bold. 50 italic. TLE BH1 ld. 51 Ap be H H T H B H B B H Pe mi I teb B teb I ata B Apabila diinginkan suatu teks miring dan teba berikut ini. HTML HEAD TITLEPenyuntingan teks dengan italic dan b HEAD BODY H1IBTeks ini ditulis dengan H1, miring BIH1 BODY HTML Penulisan I, B dan I, B bisa dibolak misalnya IBTeks ini ditulis dengan H1, miring dan tebal BI atau BITeks ini ditulis dengan H1, miring dan tebal IB atau IBTeks ini ditulis dengan H1, miring dan te atau BITeks ini ditulis dengan H1, miring dan te Gambar 23. Tampilan bold dan italic bal, penulisannya n boldTITLE g dan tebal lak-balik, n n n tebal IB n tebal BI italic. 5. Te Sin Co H H TI H B H baw B H Apa und H H TI baw T H B H mir Teks dengan garis bawah underlined Sintaks : U … U Contoh : HTML HEAD TITLEPenyuntingan teks dengan underline HEAD BODY H1UTeks ini ditulis dengan H1 dan bergar awahUH1 BODY HTML Gambar 24. Tampilan garis bawah und pabila suatu teks dengan gabungan sifat bold nderlined maka penulisannya HTML HEAD TITLEPenyuntingan teks dengan bold, italic, awah TITLE HEAD BODY H1IBUTeks ini ditulis dengan H1, bol iring 52 TITLE aris nderline. ld, italic, dan ic, dan bergaris bold, italic dan 53 U B 6. Ce Fu Sin Co H H T H B C B H UBIH1 BODY HTML Gambar 25. Tampilan underline, bold da Center Fungsi : membuat teks tunggal berada di t Sintaks : center … center Contoh : HTML HEAD TITLETeks CenterTITLE HEAD BODY CENTERTulisan ini berada di tengahCENT BODY HTML dan italic. di tengah halaman NTER 7. Pa Fun yan Sin Co H H TI H B H P P B Gambar 26. Tampilan tulisan pada posis Paragraf ungsi : untuk memisahkan paragraf yang sa ang lain intaks : P … P ontoh : HTML HEAD TITLEParagrafTITLE HEAD BODY H1Contoh paragrafH1HR PDi dalam web ini, terdapat informasi te KPTK Lembaga Pengembangan dan Pendidik dan Tenaga Kependidikan Bid Perikanan, Teknologi Informasi dan Komun KPTK adalah UPT Pusat di bawah naun Jenderal Guru dan Tenaga Kepend GTK.P P Meskipun telah LPPPTK KPTK adalah baru, namun tugas dan tanggungjawabnya lembaga lain yang di bawah Dirjen GTK se dan LPPKS.P BODY 54 sisi center. g satu dengan tentang LPPPTK n Pemberdayaan Bidang Kelautan, unikasi. LPPPTK aungan Direktorat ndidikan Dirjen h lembaga yang nya sama dengan seperti PPPPTK 55 H 8. Alig Fun atau H H H H Con HT HE TIT H BO H1 HTML Gambar 27. Tampilan paragraf. Alignment ungsi : untuk mengatur format tampilan apakah rata kiri, kanan, kiri da tengah, Sintaks : P ALIGN=right…P untuk rata ka P ALIGN=left…P untuk rata kir P ALIGN=center…P untuk rata ten P ALIGN=justify…P untuk rata kir kanan tau H? ALIGN=right…H? H? ALIGN=left…H? H? ALIGN=center…H? H? ALIGN=justify…H? ontoh : HTML HEAD TITLEAlignment ParagrafTITLE HEAD BODY H1 ALIGN=rightContoh paragrafH1HR f. ilan teksparagraf dan kanan, atau kanan kiri tengah kiri dan P P B H G 9. Jen hur Fun Sin SIZ Co H H P ALIGN=justifyDi dalam web ini, terdapat in LPPPTK KPTK Lembaga Pengem Pemberdayaan Pendidik dan Tenaga Kepen Kelautan, Perikanan, Teknologi In Komunikasi. LPPPTK KPTK adalah UPT P naungan Direktorat Jenderal Guru Kependidikan Dirjen GTK.P P ALIGN=justify Meskipun telah LPPPTK lembaga yang baru, namun tugas dan tan sama dengan lembaga lain yang di baw seperti PPPPTK dan LPPKS.P BODY HTML Gambar 28. Tampilan paragraf perataan kiri ka Jenis dan ukuran huruf ungsi : Untuk mengubah jenis huruf dan uk intaks : FONT FACE=”jenis_huruf” IZE=”ukuran_huruf” ... FONT Jenis_huruf : Times new roman, arial, ver Ukuran_huruf : 1, 2, 3, 4, ... ontoh : HTML HEAD 56 informasi tentang embangan dan pendidikan Bidang Informasi dan T Pusat di bawah dan Tenaga K KPTK adalah anggungjawabnya awah Dirjen GTK i kanan justify. ukuran huruf verdana, dll 57 TI H B FO jen Ver FO hur B H 10. Su Fun nai S Co H H TI H B Per ben B H TITLEJenis dan Ukuran FontasiTITLE HEAD BODY FONT FACE=”Verdana” SIZE=”1” Teks ini di enis huruf erdana dan ukuran 1 pt FONTBRBR FONT FACE=”Arial” SIZE=”3” Teks ini ditulis uruf Arial dan ukuran 3 pt FONT BODY HTML Superscripts ungsi : membuat teks aik indeks atas Sintaks: SUP ... SUP ontoh : HTML HEAD TITLESuperscriptsTITLE HEAD BODY ersamaan xSUP2SUP+2x-4=0 adalah sa entuk persamaan kuadrat BODY HTML i ditulis dengan lis dengan jenis h salah satu 11. Su Fun Sin Co H H TI H B Ru H H B H Gambar 29. Tampilan fungsi teks super Subscripts ungsi: membuat teks turun indeks bawah intaks : SUB ... SUB ontoh : HTML HEAD TITLESubscriptsTITLE HEAD BODY H1 umus kimia asam sulfat adalah SUB2SUBSOSUB4SUB H1 BODY HTML 58 erscripts. 59 12. List Fun Sin Un O LI LI LI LI O Un List U LI LI LI LI U Co H Gambar 30. Tampilan fungsi teks subs Listdaftar ungsi: membuat daftarlist intaks : ntuk daftar yang memperhatikan urutan Orde OL LI item 1 LI LI item 2 LI LI item 3 LI LI item 4 LI OL ntuk daftar yang tidak memperhatikan urutan ist UL LI item 1 LI LI item 2 LI LI item 3 LI LI item 4 LI UL ontoh : HTML bscripts. dered List n Unordered H B Co O LI LI LI LI O B Co U LI LI LI LI U B H HEADTITLEDaftarListTITLEHEAD BODY ontoh list yang urut: BR OL LIItem 1 LI LIItem 2 LI LIItem 3 LI LIItem 4 LI OL BRBR ontoh list yang tak urut: BR UL LIItem 1 LI LIItem 2 LI LIItem 3 LI LIItem 4 LI UL BODY HTML Gambar 31. Tampilan list dan bulle 60 llet. 61 d. Membuat Di dalam se dan kolom jumlah bar Berikut con baris dan 1 TABL TR TR TABL Perhat TR… yang m Seand menjad TR Berarti HTML TABL TR TD TR TD TR TD TABL Apabila akan t tepibo ukuran Apabila ukuran at Tabel sebuah tabel, terdapat elemen-elemen yang lom. Jadi ketika anda ingin membuat tabel, aris dan kolomnya. contoh tag HTML apabila diinginkan membuat n 1 kolom. BLE TDBaris ke-1TDTR TDBaris ke-2TDTR BLE atikan contoh di atas, setiap kali baris baru d …TR. Di dalam TR…TR terdapat menandai adanya kolom. ndainya dalam 1 baris terdapat 2 kolom berarti jadi TDKolom ke-1TDTDKolom ke-2TD rti apabila diinginkan tabel dengan 3 baris dan L nya adalah BLE TDBaris I, Kolom ITDTDBaris I, Kolom TR TDBaris II, Kolom ITDTDBaris II, Kolo TR TDBaris III, Kolom ITDTDBaris III, Ko TR BLE bila tag tersebut disisipkan dalam BODY… tampil tampil tabel pada halaman web, ta border. Untuk menampilkan bordernya, sisipk an’ pada TABLE, dengan ukuran = 0, 1, 2, … bila ukuran = 0, maka tanpa border. Dan sem an maka semakin tebal bordernya. g terdiri dari baris el, tentukan dulu at tabel dengan 2 u ditandai dengan at TD…TD rti tag HTMLnya TDTR an 2 kolom, tag lom II olom II Kolom II …BODY maka tapi tanpa garis sipkan ’BORDER = , … semakin besar nilai Contoh HTML HEAD BODY Contoh TABL TR TD TR TD TR TD TABL BOD HTM Berikut Tabel 3 Atri WID BGC ALIG BAC toh: ML ADTITLEDaftarListTITLEHEAD DY toh Tabel BR BR BLE BORDER=1 TDBaris I, Kolom ITDTDBaris I, Kolo TR TDBaris II, Kolom ITDTDBaris II, Kolo TR TDBaris III, Kolom ITDTDBaris III, Ko TR BLE DY ML Gambar 32. Tampilan fungsi tabe kut ini beberapa atribut yang bisa disisipkan pa el 3. Atribut dan fungsi tabel. tribut Fungsi IDTH = panjang Mengatur lebar ta GCOLOR = warna Memberi efek war pada tabel LIGN = [left | center | right] Perataan tabel ACKGROUND=url Memberi efek bac menggunakan ga 62 lom II olom II Kolom II bel. pada TABLE tabel arna latar ackground gambar 63 Ketera • Un apa ada diin 50 • Sel sep 800 me leb • ALI kiri • Un dig e. Link Link adal menghu-b menghubu yang berbe Sintaks A HR TARGE A HR Contoh Artinya halama file yan A HR TARGE Contoh rangan : ntuk nilai variabel ’panjang’ di atas, dapat be pabila dituliskan TABLE WIDTH=100 m dalah sepanjang horizontal halaman web. iinginkan lebar tabelnya separo halaman w 0 dst. elain dapat pula bernilai sejumlah p sepanjang horizontal halaman web, jumlah p 00. Dengan perbandingan tersebut, Anda d embuat perbandingan sendiri jumlah pixel unt ebar tabel. LIGN digunakan untuk meletakkan tabel apak iri atau di kanan. ntuk nilai variabel ’warna’ adalah sama igunakan pada atribut COLOR pada FONT. alah suatu metode dalam perancangan -bungkan file yang satu dengan file ya bungkan halaman dengan gambar yang bera rbeda. aks : REF=lokasi halaman atau URL GET=_BLANKNama LinkA Contoh: REF=index2.htmKlik di siniA toh di atas adalah membuat link ke halaman in ya ketika diklik Klik di sini selanjutnya akan ta man index2.htm berada dalam 1 direktori yang ang berisi link tersebut. REF= http:www.yahoo.com GET=_BLANKwww.yahoo.comA toh di atas adalah untuk membuat link ke situs berupa artinya maka lebar tabel b. Berarti apabila web, diberi nilai pixelnya. Untuk h pixelnya adalah diharapkan bisa untuk menentukan akah di tengah, di a seperti yang . n website untuk yang lain, atau erada pada lokasi index2.htm. tampil isi dari ng sama dengan us yahoo.com f. Menampilk Untuk mem sintaks I Ketera lokasi maupu Contoh IMG S Tag H nama gamba halama IMG S Tag HT seperti Berikut Tabel 4 Atri BOR WID HEIG ALIG Ketera Nilai ’u Apabila Nilai ’u Contoh IMG S ALIGN pilkan Gambar emasukkaninsert gambar ke dalam halaman IMG SRC=lokasi gambar rangan: si gambar berisi letak file gambar, bisa berup pun URL dan nama filenya. toh : G SRC=gambar1.jpg HTML di atas adalah untuk menyisipkan g a file gambar1.jpg ke dalam halaman we bar1.jpg berada dalam 1 direktori yang man yang ada tag tersebut. G SRC=http:myweb.comimagegambar2.gif HTML di atas untuk menyisipkan file gambar d rti yang ditulis dalam URL. kut beberapa atribut yang dapat disisipkan pad el 4. Atribut dan fungsi untuk gambar. tribut Fungsi ORDER = ukuran Memberi border gambar IDTH = ukuran Menyatakan uku gambar EIGHT = ukuran Menyatakan uku gambar LIGN = [left | center | right] Mengatur letak ga rangan : i ’ukuran’ pada BORDER = 0, 1, 2, … bila BORDER = 0 maka border tidak muncul. i ’ukuran’ pada WIDTH dan HEIGHT adalah uku toh G SRC=gambar2.gif BORDER=1 WIDTH=200 N=LEFT 64 an web digunakan upa direktori gambar dengan web. Adapun file g sama dengan if r dengan letaknya ada IMG ergaris tepi bar kuran lebar ar kuran tinggi bar k gambar . ukuran pixel 200 HEIGHT=100 65 Tag di gamba pixel, se g. Hypertext P Ban internet. N statis. Keb yang dinam user deng informasi d otomatis. Untu pemrogram perintah da 1. Client si 2. Server si Pad client atau ini adalah p programmin pemrogram PHP, ASP, PHP Lerdorf. PH mencatat p Rasmus sa mengeluark dikembangk PHP programmin tinggi. Sela Win 98, W dijalankan di atas untuk menyisipkan gambar dengan na bar2.gif, diberi border, lebar dan tinggi adala l, serta letak gambar berada di sebelah kiri hala t Preprocessor anyak pemakai internet yang sudah memilik Namun sebagian besar web yang mereka m ebanyakan mereka masih belum memahami b namis. Ciri-ciri web dinamis adalah adanya i ngan sistempemilik web, dapat menampi si dari database, halaman-halaman web dapat s. ntuk mendukung web dinamis dibu aman web. Berdasarkan tempat dijalanka dalam pemrograman web, terdapat 2 jenis kate 1. t side programming 2. er side programming ada client side programming, script programny u dalam hal ini adalah browser internetnya. C h pemrograman javascript, java applet. Sedang ming script programnya dijalankan di server. Be aman yang termasuk kategori ini adalah Perl t P, Phyton. HP PHP: Hypertext Preprocessor diciptakan PHP awal mulanya hanya digunakan oleh pen t pengunjung pada hompagenya semacam salah seorang yang mendukung openso arkan Personal Home Page PHP Tools versi ngkan dan sampai saat ini versinya sudah men HP memiliki beberapa kelebihan dibandin ming lain, yaitu mudah dibuat dan kecepatan p lain itu PHP juga support pada banyak OS sep Win NT dan turunannya, Macintosh. PH n bersama dengan web server seperti PWS nama file gambar alah 200 dan 100 alaman. iliki homepage di miliki adalah web i bagaimana web a interaksi antara pilkan informasi- at berubah secara butuhkan suatu kannya perintah- ategori: 1. 2. nya dijalankan di . Contoh kategori ngkan server side Beberapa bahasa l the oldest, CGI, kan oleh Rasmus penciptanya untuk cam hit counter. source, maka ia rsi 1.0. PHP terus encapai 5.0. ding server side n prosesnya yang seperti UnixLinux, PHP juga dapat S Personal Web Server, Ap dalam tag embedded. 2 DATABASES MySQL Management S MySQL menja juga di lingkung dibutuhkan su Username dan a. Menjalanka Untu digunakan windows ca - Klik STA - Maka a - Pada co xampp - Lalu ente monitor. Apache, IIS. Kelebihan yang lain adalah PHP d ag HTML atau dikatakan PHP merupakan d. ES MySQL L merupakan salah satu software DBM t System yang termasuk paling populer. Kini m jadi software open source yang free. MySQL ungan Windows. Untuk dapat mengakses ke da suatu authentication melalui username d an password tersebut bisa diperoleh dari admin kan MySQL ntuk menjalankan dan mengelola MySQL Data n Comand Windows ataupun Konsole OpenSU s cara menjalankan debugnya sebagai berikut : TART Run ketik cmd akan muncul jendela konsole seperti pada ga Gambar 33. Tampilan layar command pro comand ketikkan arahkan ke folder mysql pad p yang berada di folder c:\xampp\mysql\bin m nter, maka akan muncul ucapan selamat datan or. 66 P dapat diletakkan an bahasa yang BMS Database ni mulai versi 3.23 QL telah tersedia database MySQL dan password. inistrator. tabase dapat SUSE. Untuk t : gambar; rompt. ada kasus ini mysql -uroot tang di MySQL 67 - Setelah melakuka Sedangkan - Klik STA - Maka ak Pada ko - Lalu teka MySQL m - Setelah melakuka b. Pengelolaa Data sehingga penyimpana menampilka pengelolaa serta atrib databases, hingga pem 1. Perancan a. Memb h muncul, kita tinggal menggunakan bahasa M ukan pengelolaan database tersebut. n untuk OpenSUSE cara menjalankan nya seb TART Applications System Terminal Kon akan muncul jendela konsole seperti pada gam Gambar 34. Tampilan layar consol mysq konsole ketikkan simawa:~ mysql -uroot ekan enter, maka akan muncul ucapan selama L monitor seperti gambar diatas. h muncul, kita tinggal menggunakan bahasa M ukan pengelolaan database tersebut. laan MySQL atabase berfungsi sebagai tempat peny pengelolaan yang dilakukan juga ber anan data yang meliputi : memasukkan data, m ilkan data, dan menghapus data. Sebelum aan data, tentunya kita harus merancang da ribut – atribut penyimpanan yang meliput s, pembuatan tabel, pembuatan query, pena emilihan database. Berikut kami jelaskan secar cangan Database a. mbuat Database MySQL untuk sebagai berikut : onsole; ambar; sql. at datang di MySQL untuk nyimpanan data, erkaitan dengan , mengubah data, kita melakukan dahulu database uti : pembuatan nambahan query, cara sederhana : a. Dalam satu, lp2ks Cara mysq Coba masin b. Memi Setela dalam dalam mysq sekar c. Mem Setela memb komp denga alama Tabel No. Keter D Ketika di dal Cara mysq --no --na lam setiap server dimungkinkan memiliki data u, misalkan database lp3tk_kptk, database ks dan sebagainya. ra membuat database-database tersebut kita g sql CREATE DATABASE lp3tk_kptk; balah anda buat database sesuai dengan le sing b. milih Database telah database dibuat, selanjutnya adalah mem lam sistem database yang telah kita buat. Untu lam database script yang digunakan adalah : sql USE lp3tk_kptk; arang kita telah masuk ke dalam database bem c. embuat Tabel telah kita masuk ke dalam suatu database, se mbuat tabel. Didalam tabel terdapat query ponen – komponen data, misalkan tabel ngan query komponen : No, nama pegawa mat pegawai, email pegawai. bel 5 . Format untuk tabel data pegawai.

o. NAMA

NIP ALAMAT teranngan : Data – data tika membuat sebuah tabel, kita juga harus me alam tabel. ra membuat tabel di dalam database menggun sql CREATE DATABASE data_anggota no int255 not null auto_increment, nama varchar200, 68 atabase lebih dari se p4tk, database gunakan script : lembaga masing- b. emilih dan masuk tuk masuk ke : em_km. c. , selanjutnya kita ery, query berisi el data_pegawai ai, nim pegawai, EMAIL emberikan query unakan script : 69 --ni --al --em --pr Dari int13 banya data t Seda pemb disim Script harus merup d. Merub Terka yang meng mysq AFTE Deng query query e. Melih Untuk digun Untuk script 2. Pengelol a. Mema beriku nama nip int13, alamat text, email varchar200, primary keyno; ri script diatas kita lihat terdapat 13,text,varchar200. Int merupakan tipe data nyaknya bilangan sebanyak 18 bilangan. Text, ta text dengan maksimum data tidak dibatasi b dangkan varchar merupakan tipe data ka mbatasan maksimal sejumlah 200 karakter sa simpan. cript not null berarti query tersebut tidak diperke rus terdapat data didalamnya, sedangkan rupakan penomoran otomatis oleh MySQL. d. rubah Query rkadang kita ingin menambahkan satu query g telah kita buat sebelumnya. Cara me nggunakan script : sql ALTER TABLE data_ pegawai ADD tangg TER email; ngan menggunakan ini MySQL akan mena ery dengan variabel tanggal_lahir dan ditem ery email. e. lihat database dan tabel tuk melihat database-database yang ada unakan script : mysql SHOW DATABASES; tuk melihat tabel-tabel yang ada di database ipt : mysql SHOW TABLES; lolaan Data a. masukkan data untuk memasukkan data rikut : mysql INSERT INTO ma,nip,alamat,email,tanggal_lahir pat tipe data ta integer dengan xt, merupakan tipe si berapa karakter. karakter dengan saja yang dapat kenankan kosong, n auto_increment d. ery didalam tabel menambahkannya nggal_lahir text nambahkan satu empatkan setelah e. a di server kita, ; se kita, digunakan a. ta ketiklah script data_pegawai -- V -- ’1 ’imran -- ’05 b. Mena Untuk mysq data se c. Mencari da Untuk menca mysql SE -- ’im Diatas meru yang memi VALUES ’ Imran’, ’197708052003121001’, ’Dg Tata, Makassar’, ran.lp3tkgmail.com’ , ’05 Agustus 1977’,; b. nampilkan data tuk menampilkan data ketik script berikut : sql SELECTFROM data_anggota; Maka ta seperti berikut : Gambar 35. Tampilan data pada tabel_pega data encari data ketik script berikut : SELECTFROM data_pegawai WHERE email ’imran.lp3tkgmail.com’; erupakan script yang digunakan untuk mencar miliki alamat email imran.lp3tkgmail.com . 70 ssar’, b. ka akan muncul egawai. il like cari data anggota 71 Gamb d. Merubah da Untuk mer mysql U -- W data query kemudian script WH akan di ga e. Menghapu Untuk men mysql D 3 PHP MySQL Dalam MySQL. Sintaks fungsi koneksi ke My koneksi gagal berikutnya ada Sintaks bar 36. Tampilan hasil pencarian data pada tab data erubah data yang telah ada digunakan script : UPDATE data_pegawai SET email = ’ barinox7 WHERE no like ’1’; script diatas digunakan un ery email yang semula datanya berisi imran.lp3 an diganti dengan email barinox77gmail.com HERE no like ’1’ digunakan untuk mencari dat ganti. pus data enghapus data digunakan script : DELETE TABLE data_pegawai WHERE no lik L m PHP telah tersedia fungsi untuk melakukan ks: mysql_connecthost,username,passwo si tersebut akan mereturnmengembalikan n MySQL sukses dan akan mengembalikan n gal. Selanjutnya apabila koneksi telah be dalah memilih database yang diperlukan. ks: mysql_select_dbnama database; abel_pegawai. t : ox77gmail.com ’ untuk mengganti lp3tkgmail.com com sedangkan ata mana yang like ’1’; n koneksi ke word; nilai TRUE jika nilai FALSE jika berhasil, langkah Seperti akan mengem FALSE bila da diperlukan un tersebut adala sehingga akan Sintaks Fungsi dijalankan. FA diberikan berka pencarian reco output. Untuk m Sintaks Fungsi elemen dari ar Contoh script: Di bawah in menggunakan 1. Script untu 2. Script untu 3. Script untu Sebelu koneksi ke d Hostnya adala Maka file mod ?PHP mysql_ mysql_ ? atau ?PHP nama nama erti halnya fungsi koneksi sebelumnya, fungsi embalikan nilai TRUE jika nama database database yang diinginkan tidak ditemukan.F untuk mengakses database adalah mysql_ alah untuk menjalankan query yang kemudia kan dihasillkan data yang berkaitan dengan que ks: hasil = mysql_querypernyataan query; si tersebut akan menghasilkan nilai TRUE jik FALSE jika query gagal dilakukan. Apabi rkaitan dengan pencarian record data, maka se cord tersebut diambil untuk kemudian di tam k mengambil record dari query, digunakan fung ks: array_hasil = mysql_fetch_rowhasil; si di atas dihasilkan suatu array, dimana i array berkaitan dengan field pada database te pt: ini adalah script untuk membuat buku an database. Script dibagi menjadi 3 pengelola 1. ntuk memasukkan input ke dalam database. 2. ntuk melihat database 3. ntuk mengedit masukan dalam database. elumnya, terlebih dahulu Anda buat modu database. Misal nama database nya adala alah localhost. Username adalah root. Passw odul untuk koneksi adalah sbb: sql_connectlocalhost,root,; sql_select_dbbem_unnes; a_host = localhost; a_user = root; 72 gsi select db juga se ditemukan dan .Fungsi lain yang sql_query. Fungsi dian akan diolah uery tadi. ; jika query sukses bila query yang selanjutnya hasil tampilkan sebagai ngsi fetch_row. ; a masing-masing tersebut. u tamu dengan olaan, yaitu : 1. 2. 3. dul untuk fungsi alah guestbook. sswordnya kosong. 73 passw guestb mysql_ nama_ mysql_ ? Kemud 1. Script untuk input.php ?PHP If submit { include kon query = IN VALUES ’ hasil = my if hasi { } else { } } else { echo echo N echo E echo A name= name= type=su ssword = ; nama_db = stbook; sql_connectnama_host, a_user,password; sql_select_dbnama_db; udian anda simpan modul tersebut sebagai file tuk memasukkan input ke database. php it koneksi.php; INSERT INTO bukutamunama,alamat,email, ’nama’,’alamat’,’email’,’komentar’; mysql_queryquery; asil echo Input data sukses; echo Input data gagal; form method=post action=PHP_SELF; Nama : input type=text name=namabr; Email : input type=text name=emailbr; Alamat : input type=text e=alamatbr; echo Komentar : textarea e=komentartextareabr; echo input =submit name=submit value=Kirim file koneksi.php ail,komentar ; ; ; value= } ? 2. Script untuk lihat.php ?PHP include kon query = S hasil = my echo Dafta TamuBR mysql_fetch { echo N echo A data[1 mail : Kome data[3 } ? 3. Script untuk Terlebih da seperti beri Tabel 6. Fo ID 1 Im 2 Re 3 Ro input type=reset name=reset e=Hapus; echo form; tuk melihat data yang ada dalam database koneksi.php; SELECT nama,alamat,email,komentar FROM mysql_queryquery; ftar Buku RHRBR; whiledata = tch_rowhasil Nama : data[0]br; Alamat : a[1]br; echo E- : data[2]br; echo entar : a[3]brhrbr; tuk menghapus dan mengedit data dahulu kita rancang tampilannya. Misal tamp erikut Format tampilan untuk hapus dan edit data. NAMA KOMENTAR Imran Apa Kareba ... H Rewa Hallo semua… H Robert Morning all ... H 74 M bukutamu; mpilan diinginkan STATUS Hapus | Edit Hapus | Edit Hapus | Edit 75 Apabila diin baris yang mengedit e Script untuk admin.php ?PHP include kon query = S hasil = my echo tabl trtdID TARtd tdSTATU whiledata mysql_fetch { echo trtdd tda href=aksi.p a h } echo ? Pada link aksi.php u aksi dan n sesuai den link Edit. Selanjutnya aksi.php ?PHP iinginkan menghapus ID ke-1, maka tinggal k ng bersesuaian dengan ID ke-1 tersebut. S t entri ID ke-1 tinggal klik Edit. tuk membuat tampilan seperti di atas adalah sb php koneksi.php; SELECT id,nama,komentar FROM bukutamu mysql_queryquery; ble border=1; echo IDtdtdNAMAtdtdKOMEN TUStdtr; ata = tch_rowhasil data[0]tdtddata[1]tdtddata[2]t a si.php?aksi=hapusno_id=data[0]Hapusa a href=aksi.php?aksi=editno_id=data[0]Ed table; k Hapus, target dari link tersebut akan dia untuk diproses, dengan parameter yang aka no_id nomor id yang bersesuaian. Aksi engan tujuannya yaitu untuk menghapus, be ya dibuat file aksi.php sbb: php l klik Hapus pada . Sedangkan bila sbb: u; td a | Edittdtr; diarahkan ke file kan diolah adalah si adalah hapus begitu pula untuk include kon Ifaksi == { query1 = hasil1 = mysql_quer if hasil1 { echo } else { echo P } } else if { query2 = WHERE id hasil2 = m echo form Nama Email : Alamat Komen input input input form } else if koneksi.php; = hapus = DELETE FROM bukutamu WHERE id=no_ ueryquery1; 1 o Penghapusan sukses; Penghapusan gagal; if aksi == edit = SELECT id,nama,alamat,email,komentar FR id=no_id; mysql_queryquery2; data2 = mysql_fetch_ rm method=post action=PHP_SELF?aksi=up a : input type=text name=nama value=\data il : input type=text name=email value=\data at : input type=text name=alamat value=\da entar : textarea name=komentardata2[4] ut type=hidden name=no_id value=data2[0] ut type=submit name=submit value=Kirim ut type=reset name=reset value=Hapus m; ifaksi == update 76 o_id; FROM bukutamu ch_rowhasil2; update ata2[1]\br ta2[3]\br data2[2]\br ]textareabr ] 77 { query ’email ’alama hasil3 sukses } ? 4 Pengoperasi A. Membuat B Seb computer se belakang d mengangga pembelajar Kenyataann dikomputer menggunak desainer te opensource lain. Pa pembuatan Pembuatan Wo melainkan menjalanka diperlukan XAMPP ” https:ww ry3 = UPDATE bukutamu SET nama = ’nam ail’, alamat = mat’, komentar = ’komentar’ WHERE id = no sil3 = mysql_queryquery3; if hasil3 echo P kses; else echo Proses update gagal; sian Blog t Blog Offline dengan Wordpress Wordpress ebagian desaigner web, membuat sebuah r sendiri adalah hal biasa. Kenyataan ini sa dengan yang dilakukan oleh pemula. Se gap penggunaan web offline hanya un jaran saja, bukan untuk dijadikan web annya adalah sebuah web akan terbentuk d ter sendiri. Hasil desain itu dapat d akan server localhost yang terpasang di d tersebut. Ada berbagai macam Server localho rce, seperti phptriad, Xamp, Wamp, Lamp Pada kesempatan ini, akan dipaparkan l an blog offline dengan menggunakan Wordpr tan weblog offline ini menggunakan server loca WordPress bukanlah aplikasi yang bisa n membutuhkan perangkat lunak kannya. XAMPP menyediakan perangka n untuk menjalankan WordPress pada server versi terbaru di ww.apachefriends.orgindex.html “. ma’, email = no_id; o Proses update s Versi 4.4.1 h web offline di i sangat bertolak Sebagian pemula untuk keperluan b sesungguhnya. dari hasil desain dicoba dengan i dalam computer host yang tersedia plinux dan lain- langkah-langkah press versi 4.4.1. calhost XAMPP. sa berdiri sendiri server untuk kat lunak yang er lokal. Download halaman XA MySQL, PH tujuan peng bekerja pa wordpress 8.1. Un tutorial ” Ca install XAM Apache dan background langkah-lan XAMPP dib - Kebutu a. Ser tida b. Ma - Adapu sebaga 1. Ex htt da inst XAMPP merupakan singkatan dari cross-platfo PHP dan Perl. Merupakan server web lokal ya engujian. Karena XAMPP adalah cross-platfo pada Mac dan Linux LAMP, pada tutor ss offline ini kita akan menggunakan XAMPP Untuk cara install XAMPP di windows, sila Cara Install XAMPP Web Server di Windows MPP maka pastikan untuk menghidupkan ata dan MySQL pada kontrol panel seperti gamba nd hijau untuk memastikan-nya. Untuk se langkah cara install wordpress offline dibawah ini. - Kebutuhan Teknis utuhan Teknis pembuatan Blog Offline ini adala a. erver Localhost yang sudah terinstalasi P idak dijelaskan pada tutorial ini b. aster wordpress, dapat di downloads di http: - Langkah-langkah Pembuatan pun langkah-langkah pembuatan blog offl gai berikut. 1. Extract file master wordpress yang anda http:wordpress.org , maka akan didapt folder “ dalam folder ini terdapat file-file yang dibu instalasi wordpres. 78 tformX, Apache, yang ringan untuk tform, maka juga torial cara install P pada Windows silahkan kunjungi s “. Setelah anda atau mengaktifkan bar dibawah, lihat selajutnya ikuti line menggunakan - alah : a. Proses instalasi b. p:wordpress.org - ffline ini adalah 1. a downloads di r “wordpress”. Di ibutuhkan dalam 79 2. Co pa ter be 3. Akt Pr lay Ke Gambar 37. Tampilan web wordpress.or 2. Copy folder wordpress berikut file-file did pastekan ke folder www menggunakan XAM terdapat pada alamat C:\xampp\htdocs. berikut. Gambar 38. Tampilan folder xampphtdo 3. Aktifkan XAMPP dengan mengklik ProgramWampserverstart Wampserver. A layanan XAMPP dengan mengklik klik kiri tray Kemudian Klik Restart All services. Note .org. 2. didalamnya, dan MPP. Folder ini . Lihat gambar docs. 3. klik StartAll r. Aktifkan semua ray icon XAMPP. te : Jika semua lay ata Gamba 4. Bu Mo lay Se lalu se layanan telah aktif pada setingan sebelumnya atas tidak perlu dilakukan lagi. bar 39. Icon Xampp Control Panel pada Menu d Gambar 40. Xampp Control Panel versi 3.1 4. Bukalah aplikasi web browser, seperti Inte Mozilla Firefox, Opera dan lain-lain. Gunak layanan tersebut. Dalam tutorial ini digunakan Setelah halaman terbuka, ketikan alamat :http lalu jalankan alamat tersebut. Maka akan ter seperti berikut. 80 ya, konfigurasi di di Windows 8.1. 3.1.0. 4. nternet Explorer, akan salah satu n Mozilla Firefox. ttp: localhost , terbuka halaman 81 5. Se pe tel da Ha 6. Ke “C Gambar 41. Xampp di browser pada server lo 5. Setelah halaman XAMP server terbuka, dilan pembuatan Data Base dengan menggunakan telah tersedia pada WAMP server ini. Langk data base adalah dengan mengklik “phpmy Halaman Localhost. Gambar 42. phpMyadmin di browser localh 6. Ketikan nama data base yang anda inginkan, “Create”. Seperti gambar berikut. localhost. 5. lanjutkan dengan an MYSQL yang gkah pembuatan myadmin” pada alhost. 6. n, lalu klik tombol Nama “tesdb Gam 7. me Gambar 43. Membuat database baru di phpMy a database yang digunakan dalam tutor db”. Maka akan muncul halaman seperti beriku ambar 44. Konfirmasi pembuatan database tela 7. menjelaskan proses pembuatan file “wpconfig 82 Myadmin. torial ini adalah rikut ini. elah berhasil. 7. fig.php”. 83 Ga 8. La ed • • • • Gam Gambar 45. Mencari file wp-config-sample.p menjadi wp-config.php. 8. Lakukan editing pada file wp-config.php de editor. Perhatikan nomor pada gambar. • Pada nomor baris 19: – Ganti ” database dengan nama database yang kita buat seb dalam tutorial ini adalah ” tesdb “. • Pada nomor baris 22: – Ganti ” username_ root “ • Pada nomor baris 25: – Hapus tulisan ” p menjadi ” ” dibuat kosong • Pada nomor baris 28 : – Biarkan saja mbar 46. Editor script file wp-config.php baris 1 .php dan di edit 8. dengan aplikasi ase_name_here ” sebelumnya, yang e_here ” dengan ” ” password_here ” is 19,22 dan 25. Simpan memul 9. Mengin Sekara http:lo Lanjutk proses seperti Ga pan file dan dan tutup. Sekarang kita bisa ulai menginstal WordPress. 9. ginstall wordpress offline rang buka browser dan ketik-kan localhostwordpress ” dan pilih bahasa indon utkan “. Kita akan melihat halaman selamat ses instalasi WordPress. Selanjutnya akan mu rti berikut ini. Gambar 47. Menu pilih bahasa instalasi Wordpre Gambar 48. Formulir instalasi Wordpress o 84 bisa melanjutkan 9. kan alamat ” onesia dan klik ” at datang untuk muncul halaman press offline. offline. 85 Gam ambar 49. Konfirmasi instalasi Wordpress offlin Gambar 50. Menu Login Wordpress offlin Gambar 51. Update database Wordpress of fline berhasil. fline. offline. Gamba Gamb Gam

D. Aktivitas Pembe

1 Lembar Kerja - Secara indiv tentang info diampu atau bar 52. Tampilan awal website template dari Wor bar 53. Tampilan Dashboard website dari Word ambar 54. Tampilan website percobaan LPPPTK t Wordpress offline. mbelajaran ja 2.1 Pembuatan web dasar - dividu setiap peserta diklatguru membuat web prib formasi pribadi, hobi dan tulisan tentang mata tau tentang pendidikan. 86 ordpress offline. rdpress offline. K template dari - pribadi yang berisi ta pelajaran uang 87 - Secara berk sederhana y roster pelaja - Lengkapi we 2 Lembar kerja Wordpress W - Membuat we - Membuat we - Buatlah lapo wordpress pembuatann - Presentasi h ‘

E. LatihanKasusTuga

1 Perintah untuk m a. br b. tr c. p d. td e. insert 2 Untuk memasuk fungsinya hamp A. Hidden B. File C. Image D. Reset E. Submit 3 Perintah manak a. OL b. UL c. BR d. HR e. Semua jawab 4 Kepanjangan HT a. Hyper Text M - erkelompok 4-6 orang setiap kelompok, Membu a yang berisi informasi tentang visi dan misi sek ajaran, profile guru dan informasi pendukung lainny - web sekolah yang dibuat dengan fasilitas buku tam rja 2.2 Membuat Blog Offline dengan Wordpress Versi 4.4.1 - t web pribadi dengan blogger atau wordpress offline. - t web sekolah sederhana dengan blogger atau word - poran pembuatan web pribadi dan web sekolah offline disertai dengan sreenshoot prose nnya. - i hasil web pribadi dan web sekolah masing-masing usTugas k mengganti baris pada HTML adalah sukkan perinttah masukkan berupa gambar yang da mper sama dengan Submit adalah: akah yang membuat Bullets dalam pembuatan situ aban Benar HTML adalah t Manual Language - buat web sekolah ekolah, kurikulum, nya. - mu blogger atau - ne. - rdpress offline. - lah anda dengan oses dan hasil - ing. dapat diklik dan itus? b. Hypno Termi c. Hyper Text M d. Horizon Term e. Hyper Text M 5 Tag SELECT a. memilih bebe b. menentukan u c. menandai be d. menampilkan e. membatalkan 6 pada HTML un a. tr b. ul c. br d. tr e. enter 7 Untuk memanja a. table border b. column=”2” c. rowspan=”2 d. colspan=”2” e. table=”2” 8 Perintah HTML u a. Form b. Body c. Marquee d. Tr e. nbsp 9 Apa perintah ya a. html b. html c. tr d. table border e. body 10 Apa perintah ya a. body minal Maximal List t Mark-up Language rminal Mark-up List t Mark-up List CT digunakan untuk berapa opsi n ukuran beberapa opsi an opsi pilihan an opsi untuk mengganti baris menggunakan perintah njangkan kolom menjadi 2, menggunakan perintah: er=”2” 2” ”2” ”2” L untuk membuat teks berjalan adalah… yang harus dijalankan agar dapat menampilkan tab er=2 yang paling pertama dalam mengawali pembuatan 88 h: table? tan HTML?