BAB I. HTML (Hypertext Markup Language)
|
|
|
- Liani Jayadi
- 6 tahun lalu
- Tontonan:
Transkripsi
1 BAB I HTML (Hypertext Markup Language) Pendahuluan World Wide Web Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia melalui TCP/IP menjadi protokol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi, tukar menukar berbagai macam jenis informasi, dan data tanpa batas Negara dan Benua. Dalam dunia internet kita sering mendengar kata WWW (World Wide Web) yang mempunyai definisi adalah salah satu fasilitas dimana kita dapat saling bertukar informasi di internet. Banyak orang berpendapat bahwa WWW adalah dunianya sedang internet adalah jaringannya. Protocol standard aturan yang di gunakan untuk berkomunikasi pada komputer networking, Hypertext Transfer Protocol (HTTP) adalah protokol untuk WWW. Address WWW memiliki aturan penamaan alamat web yaitu URL (Uniform Resource Locator) yang di gunakan sebagai standard alamat internet. HTML adalah bahasa pemrograman yang digunakan untuk membuat dokumen yang bisa di akses melalui web. Web/Website adalah kumpulan halaman di internet yang berhubungan satu sama lain. HTML (Hypertext Markup Language) HTML(Hypertext Markup Language) merupakan standard bahasa yang di gunakan untuk menampilkan dokument web, yang bisa anda lakukan dengan HTML yaitu: Mengontrol tampilan dari web page dan contentnya. Mempublikasikan dokument secara online sehingga bisa di akses dari seluruh dunia.
2 Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. Menambahkan object-object seperti image, audio, video dan juga Java applet dalam dokument HTML. Browser dan Editor Browser Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Fireworks dan masih banyak yang lainya. Editor Program yang di gunakan untuk membuat dokumen HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad. Basic Tag HTML Tag-tag HTML Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari dokumen HTML. <BEGIN TAG> </END TAG> Contoh: Setiap dokumen HTML di awali dan di akhiri dengan tag HTML. <HTML>... </HTML> Tag tidak case sensitive, jadi bisa digunakan <HTML> atau <html> keduanya menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut: <ELEMENT ATTRIBUTE = value> Element = nama tag
3 Attribute = atribut dari tag Value = nilai dari atribut. Contoh: <BODY BGCOLOR= blue > BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai blue. Untuk memulai bekerja dengan HTML kita bisa gunakan editor Note Pad atau editor lainya. Caranya: 1. Ketikkan tag-tag berikut di notepad. <HTML> <HEAD> <TITLE>PRAKTIKUM HTML</TITLE> <BODY BG COLOR= BLUE > <CENTER>LATIHAN WEBSITE</CENTER> </BODY> </HEAD> </HTML> 2. Simpan dengan nama file perdana.htm atau perdana.html 3. Buka dengan browser internet explorer file perdana.htm atau perdana.html maka outputnya akan di tampilkan seperti gambar di bawah ini. Struktur HTML Document. Dokumen HTML bisa di bagi mejadi tiga bagian utama:
4 HTML Setiap dokumen HTML harus di awali dan di tutup dengan tag HTML <HTML> </HTML> tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah dokument HTML. HEAD Bagian header dari dokumen HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag <TITLE> yang menampilkan judul dari halaman pada titel browser. BODY Dokument body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. Basic HTML Element 1. List Item(LI) List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada tiga macam list yang bisa anda tambahkan ke dokument HTML: 1.1. Unordered List (Bullet) : Tag Unordered List (Bullet) berada di dalam tag <body></body> seperti pada contoh dibawah ini. Contoh : <ul> <li>html</li> <li>php</li> </ul> Tag Attribute Value Description <UL> TYPE SQUARE DISC CIRCLE Bullet Kotak Bullet Titik Bullet
5 Lingkaran 1.2. Ordered List (Numbering) Tag Ordered List (Numbering) berada di dalam tag <body></body> seperti pada contoh dibawah ini. Contoh: <ol start="1" type="i"> <li>hari Pertama</li> <ol type="a"> <li>introduction to HTML</li> </ol> <li>hari ke Dua</li> <ol type="a"> <li>creating table</li> </ol> Tag Attribute Value Description <OL> TYPE I i A a Upper Roman Lower Roman Upercase Lowercase <OL> START n Begin Number 1.3. Definition List Definition List dinyatakan oleh tag <DL> </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri. Contoh: <dl> <dt>html
6 <dd>hypertext Markup Langguage</dd> </dt> <dt>http <dd>hypertext Transfer Protocol</dd> </dt> </dl> 2. Horizontal Rules(HR) Horizontal Rule tag <HR></HR>digunakan untuk menggambar garis horizontal dalam dokumen HTML. Contoh: <HR> Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document HTML </HR> Attribute Description Position menetukan posisi dari HR, dengan value : center right left. Width Untuk menentukan panjang HR default 100% Size Untuk menentukan tebal dari HR dalam pixel Noshad Efek bayangan 3. Pemformatan Page 3.1 Paragraf (P) Tag yang digunakan untuk membuat paragraph baru. Contoh: <p> Horizontal Rule tag digunakan untuk menggambar garis horizontal </p>
7 3.2. Break Tag <BR> di gunakan untuk memulai baris baru pada dokumen HTML. Contoh: Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokument HTML</ BR> Dokument body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page</ BR> 3.3. Font Dengan tag <FONT> anda bisa menentukan format tampilan font dalam dokumen HTML seperti color, size, style dan lainya. Contoh: <font color="#9966ff" size="5"> Menentukan Format Tampilan Font </font> Attribute Description color Untuk menentukan warna font, kita bisa menggunakan nama font atau hexadecimal (# #ffffff). size Untuk menentukan ukuran dari font 1 7. face Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yang paling kiri Color Color merupakan attribute yang kita anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number. #RRGGBB
8 Hexadecimal Color #FF0000 Red #00FF00 Green #0000FF Blue # Black #FFFFFF White 4. Alignment Align attribute digunakan untuk menentukan perataan object dalam dokumen HTML baik berupa text, object, image, paragraph, division dan lain-lain. Value Description Left Rata kiri Right Rata kanan Center Rata tengah Justify Rata kanan kiri 5. Format text 5.1 Physical Formatting Tag <B>... </B> <I>... </I> <U>... </U> <BIG>... </BIG> <SMALL>... </SMALL> <STRIKE>... </STRIKE> Description Bold text Italic text Underline Text Untuk ukuran yang lebih besar dari normal Untuk ukuran yang lebih kecil dari normal Untuk memberi garis di tengah text
9 <SUP>... </SUP> <SUB>... </SUB> <CENTER>... </CENTER> Superscript text Subscript text Center document / text 5.2 Logical Formatting Tag Description <EM>... </EM> Text miring / <I> <STRONG>... </STRONG> Text tebal / <B> <INS>... </INS> Underline text / <U> <DEL>... </DEL> Mencoret text / <STRIKE> 6. Quotes / Indentasi Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q. Contoh: BLOCKQUOTE untuk indentasi pendek anda bisa gunakan element Q <blockquote>color merupakan attribute yang kita anda tambahkan pada beberapa element seperti body, font, link dan lainya </blockquote> 7. Preformatted text Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. Contoh: <pre> Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia melalui TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi tanpa batas Negara dan Benua. </pre>
10 8. Grouping element Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content sementara <div> digunakan untuk block-level content. Contoh: <div> Divisi 1 <p> Div tag digunakan untuk mengelompokkan group element biasanya untuk blocklevel element </p> <div align="right"> Divisi 2 <p> Ini didalam devisi kedua. di tulis dengan alignment kanan </p> 9. Hyperlink 9.1 Link ke Dokumen Lain Misalkan ada dua dokumen html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm : Contoh : <a href="link2.htm"> Click here to view document 2</a> 9.2 Link ke Section tertentu dalam Dokumen Untuk membuat link ke section tertentu dalam satu dokumen gunakan property name untuk membuat nama tujuan dari link. Syntax name anchor: <A NAME = nama >Topic name</a> untuk membuat link ke name : <A HREF= #nama >menuju ke Topic name</a> contoh: <html> <head> <title>anchor Name</title>
11 </head> <body> <b>setting up web server</b> <p> <pre> menukar berbagai macam jenis informasi, dan data tanpa batas Negara dan Benua..<a href="#www"> WWW (World Wide Web) </a> Dalam dunia internet kita sering mendengar kata WWW (World Wide Web) yang mempunyai definisi adalah salah satu fasilitas dimana kita dapat saling bertukar informasi di internet.<b><a name="www"> WWW (World Wide Web)</a></b> Banyak orang berpendapat bahwa WWW adalah dunianya sedang internet adalah jaringannya </pre> </body> </html> 9.3 Link Ke bagian tertentu Dokumen Lain Untuk membuat link ke bagian tertentu dokumen lain kita bisa gunakan anchor name didokument yang menjadi tujuan hperlink. Contoh: <A HREF= link3.htm#www >WWW (World Wide Web)</A> 10. Table 10.1 Membuat table Tag <TABLE> digunaka untuk membuat table dalam dokumen HTML, bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>. Contoh : <table border="1"> <tr> <td>cell 1a</td> <td>cell 1b</td> </tr>
12 <tr> <td>cell 2a</td> <td>cell 2b</td> </tr> </table> 10.2 Pemformatan table Untuk memformat perataan text di dalam table anda bisa gunakan attribute Align dan Valign (vertical Alignment). Attribute Align Valign Value Center justify left right BASELINE TOP BOTTOM MIDDLE 10.3 Merge cell Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge baris. Contoh: <table bgcolor= CCCCFF width="62%" border="1" cellpadding="0"> <tr> <td colspan="3" align="center">quarter 1</td> <td colspan="3" align="center">quarter 2</td> </tr> </table> 11. Image 11.1 Format Image Ada banyak format image, tapi ada tiga jenis format yang paling sering di gunakan : GIF (Graphical Interchange Format) (.GIF) JPEG (Joint Photographic Expert Image) (.JPG) PNG (Portable Network Graphics)
13 11.2 Insert Image ke Dokumen Tag IMG di gunakan untuk menginsertkan image ke dokumen HTML. Syntax nya: <IMG SRC = URL > Contoh : <img src=" E:\GAMBAR\wallp baru\ Rainbow_Concepts.jpg"> Attribute Value Description Align Center justify left right Baseline top bottom middle Top, bottom, middle digunakan untuk menentukan posisi image terhadap text Left, right, center untuk menentukan posisi image di document 12. Text berjalan Untuk membuat tulisan berjalan kita dapat menggunakan tag <MARQUEE> seperti pada contoh dibawah ini. Contoh : <MARQUEE BEHAVIOR=SCROLL DIRECTION = LEFT> TEXT </MARQUEE> Attribute Value Description MARQUEE BEHAVIOR SLIDE SCROLL ALTERNATE Berhenti di Jalan terus Bolak-balik DIRECTION LEFT, RIGHT Dari kiri, dari kanan
14 BAB I PEMBUATAN WEBSITE Untuk membuat website hendaknya ditentukan dulu rancangan tampilan awal dan sitemap / peta situs. Pada modul ini akan membuat website toko online dimana akan menggunakan beberapa bahasa web yaitu html, php, sql, css, javascript serta AJAX yang dikembangkan dari bahasa Javascript yang dikembangkan oleh Rasmus Lerdorf, sang pembuat bahasa php. Pada modul ini akan dijelaskan terlebih dahulu dalam membuat database dengan bahasa sql. Nama databasenya adalah web_(nimanda). Dalam database tersebut terdiri dari 3 tabel yang akan dibuat yaitu user, produk dan bukutamu. 2.1 Membuat Database Ketikkan script dibawah ini pada jendela sql : Create database web_ ; Use web_ ; Kemudian tekan enter. Selanjutnya adalah membuat 3 tabel. 2.2 Membuat Tabel Produk Tabel produk terdiri dari 5 field, yaitu : NAMA TIPE LENGTH PRIMARY NULL KET VAR DATA id Int 4 Auto_incremet nama Varchar 200 Harga Int 7 Stok Int 3 keterangan varchar 200
15 Untuk syntax sql, ketikkan script di bawah ini : Create table produk ( id int(4) not null primary key auto_increment, nama varchar(200) not null, harga int(7) not null, stok int(3) not null, Keterangan varchar(200) ); Kemudian masukkan data dengan menggunakan insert, data tersebut adalah : 2.3 Membuat Tabel User Gambar 2.1. Data produk Ketikkan kode dibawah ini pada jendela sql : CREATE TABLE user ( id_user int(4) NOT NULL primary key auto_increment, username varchar(30) NOT NULL, password varchar(30) NOT NULL, level varchar(10) NOT NULL, keterangan varchar(100); kemudian masukkan data pada tabel dibawah ini : Gambar 2.1. Data produk Syntaxnya adalah sebagai berikut : INSERT INTO user VALUES (1, 'Admin', 'admin', 'admin', 'full akses'); INSERT INTO user VALUES (2, 'customer', '1234', 'customer', 'membeli barang saja.'); 2.4 Membuat Tabel Bukutamu Ketikkan kode dibawah ini untuk membuat tabel buku tamu : CREATE TABLE bukutamu ( id int(4) NOT NULL primary key auto_increment,
16 judul varchar(100) NOT NULL default 'Judul', nama varchar(30) NOT NULL, varchar(30) default NULL, komentar text NOT NULL); Kemudian masukkan data-data yang anda inginkan. Setelah membuat databasenya maka langkah selanjutnya adalah membuat halaman index dimana halaman index merupakan halaman utama atau homepage dari website yang akan dibuat.
17 MODUL III PEMBUATAN HALAMAN WEB DENGAN PHP, CSS DAN JAVASCRIPT 3.1.Tampilan Web index.php Website yang akan dibangun adalah dengan tampilan seperti dibawah ini : Gambar 3.1. Tampilan hompage (index.php) Untuk membuat tampilan seperti diatas diperlukan script css agar dalam pembuatan website lebih mudah dan terstruktur dan ketika ingin merubah gaya dari tampilan dapat merubah syntax css tersebut saja sehingga dapat memaksimalkan waktu dan kinerja. Syntax css yang digunakan diberi nama style.css adalah sebagai berikut : body { margin:0; padding:0; line-height: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 12px;
18 color: #000000; background: #ffffff; a:link, a:visited { color: #008fc1; text-decoration: none; a:active, a:hover { text-decoration: underline; h1 { margin: 0px; padding: 0px 0px 0px 0px; font-size: 18px; font-weight: bold; color:#008fc1; h2 { margin: 0px; padding: 0px 0px 0px 0px; font-size: 15px; font-weight: bold; color:#ffffff; h3 { margin: 0px; padding: 0px; font-size: 14px; font-weight: bold; color: #37a7ce; text-decoration: underline; h4 { p { margin: 0px; padding: 10px 0px 0px 0px; font-size: 12px; font-weight: bold; color: #000000; margin: 10px 0px; color: #5b5847; text-align: justify; img { margin: 0px; padding: 0px; #container { margin: 0px auto;
19 width: 930px; margin-top: 15px;.send_btn { margin: 0px; padding: 0px 0px 0px 0px; height: 19px; width: 27px; font-size: 14px; font-weight: bold; color: #0a8eb8; text-decoration: none; background: none; border: none;.textfield { margin: 0px 5px 0px 0px; padding: 0px; float: left; height: 19px; width: 175px; font: 12px Arial; font-weight: normal; color: #333333; text-decoration: none; border: 1px solid #CCCCCC; #header1 { clear: both; padding: 0px; margin: 0px 0px 5px 0px; width: 930px; height: 147px; #logo { margin: 0px 3px 0px 0px; float: left; width: 235px; height: 147px; background: url(images/logo.jpg) no-repeat; #header { margin: 0px; padding:0px; float: right; width: 690px; height: 147px;
20 background: url(images/templatemo_heading_background.jpg) norepeat; #amenu { clear: both; margin-bottom: 5px; padding: 0px; width: 930px; height: 35px; background: #ffffff; #search { float: left; width: 225px; height: 28px; padding: 7px 0px 0px 10px; background: url(images/templatemo_menu_background.gif) repeat-x; #menu { float: right; width: 690px; height: 35px; margin: 0px; background: url(images/templatemo_menu_background.gif) repeat-x; #menu ul { margin: 0px; text-align: right; list-style: none; #menu ul li { margin: 0px; display: inline; #amenu ul li a { margin: 0px; display:inline-block; height: 30px; padding: 5px 20px 0px 20px; font: 14px arial; color:#000000; text-decoration: none; #menu ul li a:hover, #menu ul li.current { color: #FFF; background: url(images/templatemo_menuhover_background.gif) repeat-x;
21 #isi { float: left; margin: 0px; padding: 0px; width: 930px; #kiri { float: left; margin: 0px 10px 5px 0px; padding: 20px 10px; width: 215px; background: #e0e0e0; min-height: 400px; #tengah { float: left; margin: 0px 0px 5px 0px; padding: 20px 5px; width: 465px; min-height: 400px; #kanan { float: right; margin: 0px 0px 5px 10px; padding: 20px 0px 0px 0px; width: 200px; background: #e0e0e0; min-height: 400px; #kotak { width: 215px; padding: 0px; background: #008fc1; margin: 0px 0px 10px 0px; #kotak.atasnya{ width: 195px; height: 15px; padding: 10px; background: url(images/templatemo_leftsection_top.gif) norepeat; #kotak.bawahnya{ width: 195px; padding: 10px; color: #FFFFFF;
22 #kotak2 { width: 190px; padding: 10px 10px 10px 15px; background: #6ebfdc; border-top: 5px solid #008fc1; margin: 0px 0px 10px 0px; #kotak2 ul { margin: 0px; padding: 10px 0px 0px 5px; list-style: none; #kotak2 ul li{ display: block; margin: 0px 0px 10px 0px; padding: 0px; #kotak2 ul li a{ padding: 0px 0px 0px 15px; margin: 0px; color: #ffffff; text-decoration: none; background: url(images/templatemo_list_icon02.gif) center left no-repeat; #kotak2 ul li a:hover{ text-decoration: none; #kotak3 { clear: both; width: 190px; padding: 0px; margin: 0px 0px 10px 5px; #kotak3.atas{ width: 190px; height: 25px; padding: 10px 0px 0px 0px; background: #008fc1 url(images/templatemo_rightsection_top.gif) no-repeat; #kotak3.bawah{ width: 170px; padding: 15px 10px 10px 10px; background: #cce8f2;
23 #kotak3.customer_section{ clear: both; margin: 0px 0px 20px 0px; padding: 0px;.form_row{ padding: 3px 0px; form{ margin: 0px 10px 0px 0px; padding: 0px; text-align: right; label { margin-right: 10px; input{ width: 110px; height: 18px;.button{ width: 60px; height: 25px; #footer { clear: both; padding: 10px 0px 0px 0px; width: 930px; height: 50px; text-align: center; color: #666; background: #d5d5d5; text-align: center; #footer a{ color: #666; #footer a:hover{ color: #ffffff; Pada halaman diatas (index.php) terdapat beberapa box tampilan serta link-link yaitu link produk, buku tamu dan about us. Dan fasilitas lainnya yang ada adalah pada box
24 kiri :search, login, review produk terbaru. Sedangkan pada box kanan terdapat fasilitas testimonial, serta informasi utama pada bagian tengah. Untuk membuatnya dilakukan bertahap, pada langkah awal adalah membuat halaman index serta style dengan menggunakan css. Kemudian langkah kedua adalah membuat fasilitas yang berada pada box kiri. Namun sebelum itu yang harus dilakukan adalah membuat koneksi ke database. Untuk melakukan koneksi dapat dilakukan langsung pada halaman yang akan menggunakan tabel, atau membuat file dengan ekstensi.php atau.inc. scriptnya adalah sebagai berikut : <?php $konek=mysql_connect("localhost","root"," "); $konekdb=mysql_select_db("web_ "); if (!$konek) { die("koneksi ke mysql gagal!"); if(!$konekdb) { die("koneksi ke database gagal!");?> Perhatikan script dibawah ini : $konek=mysql_connect("localhost","root"," "); Script value yang digunakan diatas tergantung pada setting apache/ xampp/ wampp/ lampp yang digunakan. Dimana localhost adalah nama web server yang digunakan, root adalah nama username, dan adalah password yang digunakan. Pada halaman index.php diatas menggunakan potongan-potongan bagian, yaitu bagian box kiri, bagian box tengah, bagian box kanan dan bagian header. Untuk bagian box kiri ketikkan script dibawah ini dan beri nama boxkiri.php: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso ">
25 <title>****pk&m Online Shop****</title> </head> <body> <div id="kiri"> <div id="kotak"> <div class="atasnya"> <h2>login</h2> <div class="bawahnya"> <form method="post" action="proses_login.php"> <div class="form_row"> Username <input class="inputfield" name="username" type="text" id=" _addremss"/> <div class="form_row">password <input class="inputfield" name="password" type="password" id="password"/> <input class="button" type="submit" name="submit" value="login" /> </form> <div id="kotak2"> <h2>review Produk Terbaru</h2> <?php include "koneksi.inc"; $hasil=mysql_query("select nama, keterangan, harga from produk order by id desc LIMIT 1"); while($r=mysql_fetch_array($hasil)){ echo"<br><b>$r[nama]</b> <hr width=150 color=blue align=left> $r[keterangan]<br/> Harga : <b>rp.$r[harga]</b><br/>";?> <div> <a href="ymsgr:sendim?idin135"><img src=" border=0 width="100" height="50" > </a> </body> </html>
26 Setelah diketikkan script diatas maka pada jendela browser dapat dilihat hasilnya adalah sbb : Gambar 3.2. Tampilan boxkiri Sedangkan untuk box kanan yaitu untuk testimonial ketikkan script dibawah ini dan beri nama boxkanan.php: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>****pk&m Online Shop****</title> </head> <body> <div id="kanan"> <div id="kotak3"> <div class="atas"> <h2 align="center">testimonial</h2> <div class="bawah"> <div class="customer_section"> <marquee direction="up" scrollamount="2" scrolldelay="50" onmouseover="this.stop()" onmouseout="this.start()">
27 <?php include "koneksi.inc"; $hasil=mysql_query("select nama, , komentar from bukutamu order by id desc"); while($r=mysql_fetch_array($hasil)){ echo"<br><b>$r[nama]</b> color=blue align=left>"; </body> </html> </marquee> <br/>$r[komentar]<br/> <b>$r[ ]</b><br/> <hr width=150?> Tampilan dari script diatas adalah : Gambar 3.3. Tampilan boxkanan
28 Kemudian untuk headernya ketikkan script dibawah ini dan beri nama header.htm: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>****pk&m Online Shop****</title> </head> <body> <div id="header1"> <div id="logo"> <div id="header"> <div id="amenu"> <div id="search"><form method="post" action="proses_search.php"> <input class="textfield" type="text" value="cari produk..." name="judul"/> <input class="send_btn" type="submit" value="go" /> </form> </body> </html> Hasil dari script diatas : Gambar 3.4. Tampilan Header.htm
29 Langkah selanjutnya adalah membuat halaman-halaman inti dimana potonganpotongan halaman yang sudah dibuat sebelumnya disatukan dengan cara include. Untuk halaman index (homepage), ketikkan script dibawah ini dan beri nama index.php: <?php include "koneksi.inc";?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <link rel="shortcut icon" href="images/cdr.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <?php include"header.htm";?> <div id="menu"> <ul> <li><a href="index.php" class="current">home</a></li> <li><a href="produk.php">produk</a></li> <li><a href="bukutamu.php">buku Tamu</a></li> <li><a href="about.php">about Us</a></li> </ul>
30 <div id="isi"> <? include "boxkiri.php";?> <div id="tengah"> <h1>selamat Datang</h1> <p> Selamat datang do Online Shop PK&M. Kami menawarkan berbagi macam produk software sebagai solusi permasalahan anda.</p> <p> Kami menjual produk software mulai dari bahasa C sampai dengan.net framework, dengan tutorial yang dapat digunakan sebagai media pembelajaran. </p> <br /> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </body> </html> Hasil dari script diatas dapat dilihat pada gambar 3.1. Untuk halaman produk, ketikkan kode dibawah ini dan beri nama produk.php: <?php include "koneksi.inc";?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title>
31 <link rel="shortcut icon" href="images/cdr.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <?php include"header.htm";?> <div id="menu"> <ul> <li><a href="index.php">home</a></li> <li><a href="produk.php" class="current">produk</a></li> <li><a href="bukutamu.php">buku Tamu</a></li> <li><a href="about.php">about Us</a></li> </ul> <div id="isi"> <? include "boxkiri.php";?> <div id="tengah"> <h1>product PAGE</h1> <?php include"koneksi.inc"; echo "<table border=0>"; $tampil=mysql_query("select nama, keterangan, harga, stok from produk order by id desc"); if($t=mysql_num_rows($tampil)==0) {echo "<font face='verdana' size='5'><center>berita Belum Ada!</center></font>"; else { while($r=mysql_fetch_array($tampil)){ echo"<tr><td><b>$r[nama]</b></td></tr> <tr><td>harga :Rp.$r[harga]</td></tr> <tr><td>$r[keterangan]</td></tr> <tr><td>stok : $r[stok]</td></tr>";
32 echo"</table>";?> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </body> </html> Gambar 3.5. Tampilan halaman produk untuk halaman buku tamu, ketikkan kode dibawah ini dan beri nama bukutamu.php : <?php include "koneksi.inc";?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd">
33 <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <link rel="shortcut icon" href="images/cdr.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <?php include"header.htm";?> <div id="menu"> <ul> <li><a href="index.php">home</a></li> <li><a href="produk.php">produk</a></li> <li><a href="bukutamu.php" class="current">buku Tamu</a></li> <li><a href="about.php">about Us</a></li> </ul> <div id="isi"> <? include "boxkiri.php";?> <div id="tengah"> <h1>halaman Buku Tamu </h1> <? include "koneksi.inc"; echo "<table border=0 width='80%'>"; $tampil=mysql_query("select * from bukutamu order by id DESC"); if($t=mysql_num_rows($tampil)==0) {echo "<font face='verdana' size='5'><center>buku tamu Belum Ada!</center></font>"; else { while($r=mysql_fetch_array($tampil)){
34 echo"<tr><td><b>$r[judul]</b><br></td></tr> <tr><td><u>$r[ ]</u></td></tr> <tr><td>$r[komentar]</td></tr> <tr><td>oleh : <b>$r[nama]</b></td></tr> <tr><td><hr color='#009900' width='400' align='left'></td></tr>"; echo"</table>";?> <form method="post" action="gbook.php"> <table align="left" width="80%"> <tr> <td colspan="2"><center><font face="verdana" color="#003300"><h3>isi BUKU TAMU</h3></font></center></td> </tr> <tr> <td>judul :</td> <td><input type="text" name="judul"/></td> </tr> <tr> <td>nama :</td> <td><input type="text" name="nama"/></td> </tr> <tr> <td> </td> <td><input type="text" name=" "/></td> </tr> <tr> <td valign="top">komentar :</td> <td><textarea cols="35" rows="8" name="komentar"></textarea></td> </tr> <tr> <td></td>
35 <td><input type="submit" value="kirim" /><input type="reset" value="ulang" /></td> </tr> </table> </form> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </body> </html> Gambar 3.6. Tampilan halaman Buku Tamu
36 untuk halaman About Us ketikkan script dibawah ini dan beri nama about.php: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <link rel="shortcut icon" href="images/cdr.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <?php include"header.htm";?> <div id="menu"> <ul> <li><a href="index.php">home</a></li> <li><a href="produk.php">produk</a></li> <li><a href="bukutamu.php">buku Tamu</a></li> <li><a href="about.php" class="current">about Us</a></li> </ul> <div id="isi"> <? include "boxkiri.php";?> <div id="tengah"> <h1>product PAGE</h1> <pre> Copyright Crew Lab PK&M 2009 Untuk informasi, pertanyaan dan pemesanan lebih lanjut atau fax
37 Atau kirim di <a href = "mailto :idin135@yahoo.com">sini</a>. </pre> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </body> </html> Tampilan hasil penulisan script diatas : Gambar 3.7. Tampilan Halaman About Us
38 Halaman-halaman link sudah dibuat, yaitu halaman utama, halaman produk, halaman bukutamu dan halaman about us. Kemudian potongan-potongan yang sudah dibuat adalah box kiri, box kanan, dan header. Sedangkan box yang ada ditengah diisi dengan script yang sudah diketikkan pada halaman link. Proses_search.php Pada potongan halaman header, terdapat fasilitas search dimana dapat digunakan untuk mencari data dengan kata kunci berdasarkan produk, maka ketikkan kode dibawah ini untuk mengeksekusi form pada search yaitu proses_search.php: <html> <head><title>cari</title> <link rel="shortcut icon" href="images/home.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css"> </head><body> <?php include "koneksi.inc"; $judul=$_post['judul']; $batas = 2; $halaman = $_GET['halaman']; if (!($halaman)) { $posisi = 0; $halaman = 1; else{ $posisi=($halaman-1)*$batas; echo "<table border=0>"; $tampil=mysql_query("select nama, keterangan,harga from produk where nama like '%$judul%' order by id desc LIMIT $posisi, $batas"); while($r=mysql_fetch_array($tampil)){ echo"<tr><td><b>$r[nama]</b></td></tr>
39 <tr><td>$r[keterangan]</td></tr> <tr><td>$r[harga]</td></tr> <tr><td><hr width=400 color=#ff9900 /></td></tr>"; $tampil2 = mysql_query("select * FROM produk"); $jml_data = mysql_num_rows($tampil2); $jml_halaman = ceil($jml_data/$batas); echo "<br>halaman : "; for ($i=1; $i<=$jml_halaman; $i++) if ($i!= $halaman){ echo "<a href=$_server[php_self]?halaman=$i>$i</a> "; else{ echo " <b>$i</b> "; echo "<p>jumlah Hasil Pencarian : <b>$jml_data</b> data </p>"; echo"</table>";?> <a href="index.php">back to Home</a> </body></html> Proses pencarian diatas menghubungkan file php dengan mysql, yaitu menghubungkan dengan tabel produk dimana tabel tersebut menyimpan datadata tentang produk yang dimiliki, dengan menggunakan kata kunci judul produk. Jika ditemukan, maka data akan ditampilkan namun jika tidak maka data tidak ditampilkan. Jika terdapat lebih dari satu hasil pencarian maka tampilan akan dibatasi dengan menggunakan metode paging yang sering digunakan oleh banyak pengguna php saat ini. Pada file diatas, jika hasil pencarian adalah 5, maka akan dibagi menjadi 3 halaman, yaitu 2 data pada halaman 1, 2 data berikutnya pada halaman 2 dan terakhir 1 data pada halaman 3.
40 Gbook.php Pada halaman buku tamu terdapat form yang dapat menuliskan komentar dengan memasukkan judul, nama, serta komentar yang dapat secara otomatis tersimpan pada tabel bukutamu yang telah dibuat di MySQL. Untuk mengeksekusi form buku tamu tersebut ketikkan script dibawah ini dan beri nama gbook.php : <?php include "koneksi.inc"; $judul=$_post['judul']; $nama=$_post['nama']; $ =$_post[' ']; $komentar=$_post['komentar']; if($judul=='') {echo"masukkan Judul"; else if($nama=='') {echo"masukkan nama Anda"; else { $qry=("insert into bukutamu (judul,nama, ,komentar) values ('$judul','$nama','$ ','$komentar')"); if($result=mysql_query($qry)) { echo "<center>buku Tamu berhasil ditambahkan </center>"; include "bukutamu.php"; else { echo "<center>data gagal disimpan</center>"; include "bukutamu.php";?>
41 Dari script yang telah diketikkan diatas, input berupa text pada judul dan nama harus diisikan, jika kosong maka akan muncul pesan Masukkan judul jika judul kosong dan Masukkan nama Anda jika nama dikosongkan. Jika form telah diisi maka akan muncul pesan Buku tamu berhasil ditambahkan serta data tersimpan pada database dan akan tampil pada halaman bukutamu dengan posisi paling atas. Namun jika tidak dapat tersimpanmaka akan muncul pesan data gagal disimpan. Proses_Login.php Pada potongan halaman box kiri terdapat fasilitas login dimana kita yang mempunyai username dan password yang telah terdaftar pada database dapat melakukan login, kemudian untuk melakukan eksekusi dari form login tersebut ketikkan script dibawah ini dan beri nama proses_login.php: <?php include "koneksi.inc"; session_start(); $username = $_POST['username']; $password = $_POST['password']; $qry="select username,password,level FROM user WHERE username='$username' AND password='$password'"; $result=mysql_query($qry); $res=mysql_fetch_array($result); if($res[level]=='customer') { header ("location: index_customer.php"); $_SESSION['SESS_NAME'] = $username; $_SESSION['SESS_PASS'] = $password; else if($res[level]=='admin') { header ("location: produka.php"); $_SESSION['SESS_NAME'] = $username; $_SESSION['SESS_PASS'] = $password;
42 else { header("location: login_gagal.php"); exit();?> 3.2. Halaman Admin Untuk membuat halaman admin, juga dibagi menjadi beberapa file. Komponen utamanya adalah boxkiria dimana hanya username yang mempunyai level admin saja yang dapat melihat komponen tersebut. Kemudian boxkanan, yaitu yang berisi testimonial dimana sudah dibuat pada modul bab sebelumnya. Boxkiria terdapat 2 box yaitu status login anda, dan link untuk menambah produk dan logout. Link-link yang ada pada halaman admin adalah Produk, User dan Logout. Halaman produk memperbolehkan admin untuk mengelola produk yaitu menambah, mengedit dan menghapus record pada tabel produk dalam database yang telah dibuat. Sedangkan halaman User memperbolehkan admin untuk mengedit informasi / field pada record account user yang telah dibuat, serta dapat menghapus account user yang telah dipilih. Link Logout digunakan untuk keluar dari halaman admin, dan halaman di-direct ke halaman index.php. Langkah pertama yang dilakukan adalah membuat autentikasi untuk mengetahui apakah user berhak mengakses halaman tertentu. Jika benar user mempunyai hak akses terhadap halaman yang akan dibuka maka halaman yang dimaksud akan muncul, namun jika user tidak berhak mengaksesnya maka secara otomatis halaman di-direct ke akses_ditolak.php.
43 Autentikasi.php <?php session_start(); if(!isset($_session['sess_name']) (trim($_session['sess_pass']) == '')) { header("location: akses_ditolak.php"); exit();?> Autentikasi digunakan untuk keamanan pengaksesan halaman. Script diatas menanyakan apakah user berhak mengakses halaman yang akan dibuka dengan menggunakan variable session. Kondisi lainnya adalah jika password yang diambil dari variable session kosong, maka halaman akan direct ke halaman akses_ditolak.php. Akses_ditolak.php Halaman ini digunakan untuk pengaksesan halaman dilindungi yang tidak disertai dengan username dan password. Scriptnya dibawah ini : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>access Denied</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <h1><font color="#ffcc00"akses Di Tolak</font></h1> <p align="center"> </p> <h4 align="center"><font color="#ffcc00">anda<br /> Tidak Mempunyai Akses Di Sini.
44 <br /> <a href="index.php"><<kembali ke Home</a></font></h4> </body> </html> Tampilannya adalah sebagai berikut : Gambar 3.8. tampilan akses_ditolak.php Boxkiria.php Ketikkan script dibawah ini untuk membuat komponen boxkiria yang akan tampil pada halaman dengan user level= admin. <?php include"koneksi.php"; include"autentikasi.php";?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>****pk&m Online Shop****</title> </head> <body> <div id="kiri"> <div id="kotak"> <div class="atasnya"> <h2>status</h2> <div class="bawahnya">
45 <img src="images/user.ico" width="60" align="texttop"/> Selamat datang<b> <?php echo $_SESSION['SESS_NAME'];?> </b> <div id="kotak2"> <h2>menu Admin</h2> <ul> <li><a href="add.php">add Produk</a></li> <li><a href="logout.php">logout</a></li> </ul> <div> <a href="ymsgr:sendim?idin135"><img src=" border=0 width="100" height="50" > </a> </body> </html> Dari program diatas, di-include-kan file koneksi.php untuk melakukan koneksi terhadap database dan file autentikasi.php dimana file ini digunakan untuk keamanan halaman yang dilindungi, yaitu dengan mencocokkan inputan username serta password dengan data yang ada pada database yang dikoneksikan. Pada script diatas terdapat link ke opi.yahoo.com, hal ini adalah fasilitas tambahan untuk aplikasi yahoo messenger, yaitu chat melalui messenger dengan orang yang mempunyai alamat yang tertera diatas. Gambar link messenger diatas diambil dari server provider(misalnya Yahoo!), dan untuk mengetahui apakah user sedang online atatu offline.
46 Hasil dari script diatas adalah sebagai berikut : Gambar 3.9. Tampilan boxkiria.php Dari tampilan diatas terdapat link Add produk, untuk memprosesnya ketikkan kode dibawah ini dan beri nama add.php : <?php include "koneksi.inc"; include "autentikasi.php";?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <link rel="shortcut icon" href="images/cdr.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body>
47 <? if ($_SESSION['SESS_NAME'] == "admin") {?> <div id="container"> <?php include"header.htm";?> <div id="menu"> <ul> <li><a href="produka.php" class="current">produk</a></li> <li><a href="user.php">user</a></li> <li><a href="logout.php">logout</a></li> </ul> <div id="isi"> <? include "boxkiria.php";?> <div id="tengah"> <form method="post" action="proses_add.php"> <table width="80%" align="center" cellpadding="0"> <tr> <td colspan="2"><h1><center>form ADD PRODUK</center></h1></td> </tr> <tr> <td width="30">nama </td> <td><input name="nama" type="text" size="50" /></td> </tr> <tr> <td>harga </td> <td><input type="text" name="harga" size="15" /></td> </tr> <tr> <td>stok </td>
48 <td><input type="text" name="stok" size="10"/></td> </tr> <tr> <td valign="top">keterangan </td> <td><textarea cols="40" rows="4" name="keterangan"></textarea></td> </tr> <tr> <td></td> <td><input type="submit" name="submit" value="tambah" /><input type="reset" value="ulang" /></td> </tr> </table> </form> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M <? else { echo "<h1>maaf.. Anda Bukan Admin</h1>";?> </body> </html>
49 Hasilnya dari kode diatas adalah : Gambar tampilan add.php Halaman Utama Admin Halaman utama admin pada modul ini diberi nama produka.php, scriptnya adalah dibawah ini : <?php include "koneksi.inc"; include "autentikasi.php";?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <link rel="shortcut icon" href="images/cdr.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body>
50 <div id="container"> <?php include"header.htm";?> <div id="menu"> <ul> <li><a href="produka.php" class= "current">produk</a></li> <li><a href="user.php">user</a></li> <li><a href="logout.php">logout</a></li> </ul> <div id="isi"> <?php include "boxkiria.php";?> <div id="tengah"> <h1>produk</h1> <?php $sql=mysql_query("select id, nama,harga, stok, keterangan from produk"); echo"<table width=70%>"; while($tampil=mysql_fetch_row($sql)) { $id=$tampil[0];$nama=$tampil[1]; $harga=$tampil[2]; $stok=$tampil[3]; $keterangan=$tampil[4]; echo"<tr><td>"; echo"<b>$nama</b></td></tr>"; echo"<tr><td>"; echo"harga: Rp.$harga</td></tr>"; echo"<tr><td>"; echo"stok : $stok</td></tr>"; echo"<tr><td>"; echo"$keterangan<br></td></tr>"; echo"<tr><td>"; echo"<a href=edit.php?id=$id>edit</a> <a href= hapus.php?id=$id>hapus</a><br><hr color=#0066ff></td></tr>";
51 echo"</table>";?> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </body> </html> Hasil tampilan dari script diatas adalah : Gambar Tampilan halaman utaman untuk admin Dari tampilan diatas terdapat link edit dan hapus, untuk edit ketikkan script berikut ini dan beri nama file tersebut edit.php : <?php include "koneksi.inc"; include "autentikasi.php";?>
52 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <link rel="shortcut icon" href="images/cdr.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <?php include"header.htm";?> <div id="menu"> <ul> <li><a href="produka.php" class="current">produk</a></li> <li><a href="user.php">user</a></li> <li><a href="logout.php">logout</a></li> </ul> <div id="isi"> <? include "boxkiria.php";?> <div id="tengah"> <h1>selamat Datang</h1> <?php $id=$_get['id']; $query=mysql_query("select * from produk where id='$id'"); while($r=mysql_fetch_array($query)){ echo "<form method='post' action='proses_edit.php'> <table> <tr>
53 <td colspan=2><center>form EDIT PRODUK</center></td> </tr> <tr> <td width='30'>nama </td> <td><input name='nama' type='text' size='50' value='".$r[nama]."' /></td> </tr> <tr> <td>harga </td> <td><input type='text' name='harga' size='15' value='".$r[harga]."' /></td> </tr> <tr> <td>stok </td> <td><input type='text' name='stok' size='10' value='".$r[stok]."' /></td> </tr> <tr> <td>keterangan </td> <td><textarea cols='40' rows='4' name='keterangan'>".$r[keterangan]."</textarea></td> </tr> <tr> <td></td> <td><input type='submit' name='submit' value='edit' /> <input type='reset' value='ulang' /> <input type='hidden' name='id' value=".$r[id]." /></td> </tr> </table> </form>";?> <?php include "boxkanan.php";?>
54 <div id="footer"> Copyright 2009 Designed by crew PK&M </body> </html> Hasilnya : Gambar tampilan edit.php Kemudian untuk memproses form diatas, ketikkan kode dibawah ini : <?php require_once('autentikasi.php'); require_once('koneksi.inc'); $nama=$_post['nama']; $harga=$_post['harga']; $stok=$_post['stok']; $keterangan=$_post['keterangan']; $id=$_post['id']; $query=mysql_query("update produk set nama='$nama',harga='$harga',stok='$stok',keterangan='$keteranga n' where id='$id'"); if ($query){
55 echo "berhasil Edit"; include "produka.php"; else { echo "Edit Tidak Berhasil"; include "produka.php";?> Jika proses edit berhasil maka akan muncul pesan di jendela browser pojok kiri atas berhasil Edit dan halaman direct ke halaman utama admin, namun jika proses edit tidak berhasil maka muncul pesan Edit Tidak Berhasil dengan halaman yang terbuka adalah halaman utama admin. Untuk link hapus, ketikkan kode dibawah ini : <?php include "koneksi.inc"; include "autentikasi.php"; $no=$_get['id']; $hapus="delete from produk where id='$no'"; $result=mysql_query($hapus); if($result==0) { echo "data tidak ada"; else { echo "<font color='#ff0000' face='verdana' size='3'>data produk dengan nomor id $no berhasil dihapus!</font>"; include "produka.php";?> Jika record yang dimaksud tidak ada/ tidak berhasil menghapus data maka muncul pesan data tidak ada, namun jika proses hapus berhasil maka pesan yang muncul adalah Data produk dengan nomor id (no_id) berhasil dihapus!
56 Halaman User Halaman produk mempunyai fasilitas umum yaitu add, edit dan delete produk, yang sudah ditampilkan pada halaman utama admin. Link selanjutnya adalah link User yang mempunyai fasilitas edit dan delete, sedangkan untuk penambahan user tidak diberikan. Untuk lebih jelasnya ketikkan script dibawah ini : <?php include "koneksi.inc"; include "autentikasi.php";?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title> <link rel="shortcut icon" href="images/cdr.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <?php include"header.htm";?> <div id="menu"> <ul> <li><a href="produka.php">produk</a></li> <li><a href="user.php" class="current">user</a></li> <li><a href="logout.php">logout</a></li> </ul> <div id="isi"> <? include "boxkiria.php";?>
57 <div id="tengah"> <h1>user</h1> <? $tampil=mysql_query("select id_user, username, level, password from user order by id_user "); $msg=''; echo "<table border=1 cellpadding='0' cellspacing='0'>"; echo "<tr><td width='55px' align='center' valign='middle'><b>no</b></td> <td width='200' align='center'><b>user</b></td> <td width='200' align='center'><b>level</b></td>"; echo "<td width='100' align='center'><b>password</b></td> <td colspan=2 align='center'><b>status</b></td></tr>"; $no=1; while($r=mysql_fetch_array($tampil)){ echo"<tr><td align='center' valign='middle'>$no</td> <td><b>$r[username]</b></td> <td align='center' valign='middle'>$r[level]</td> <td align='center' valign='middle'>$r[password]</td> <td width='70' align='center'><a href='edit_user_admin.php?no=$r[id_user]'>edit</a></td> <td width='70' align='center'><a href='delete_user_admin.php?no=$r[id_user]'>hapus</a></td></tr> "; $no++; echo "</table>"; echo $msg;?> <?php include "boxkanan.php";?> <div id="footer">
58 Copyright 2009 Designed by crew PK&M </body> </html> Tampilan dari script yang sudah diketikkan diatas adalah sebagai berikut : Gambar tampilan halaman user.php Untuk link edit yang ada pada kolom status, ketikkan kode dibawah ini dan beri nama edit_user_admin.php : <?php require_once "koneksi.inc"; require_once "autentikasi.php";?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>****pk&m Online Shop****</title>
59 <link rel="shortcut icon" href="images/cdr.ico" type="image/ico"> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <?php include"header.htm";?> <div id="menu"> <ul> <li><a href="produka.php" class="current">produk</a></li> <li><a href="user.php">user</a></li> <li><a href="logout.php">logout</a></li> </ul> <div id="isi"> <? include "boxkiria.php";?> <div id="tengah"> <h1>edit User</h1> <?php $id=$_get[no]; echo "<form method='post' action='edit_user_act.php'> <table border='0' cellpadding='1' cellspacing='1' align='center'>"; $query=mysql_query("select id_user, username, password, level from user where id_user='$id'"); while ($r=mysql_fetch_array($query)){ echo "<tr> <td width='35'> </td> <td align=left>user</td> <td><input type='text' name='username' size='35' value='".$r[username]."'/></td></tr> <tr> <td> </td> <td align=left>password</td>
60 <td><input type='password' name='password' size='35' value='".$r[password]."'/></td></tr> <tr> <td> </td> <td align=left>level</td> <td><select name='level'> <option selected='selected' value='admin'>admin</option> <option value='customer'>customer</option> </select> </td> </tr> <tr><td colspan='3'> </td></tr> <tr><td> </td> <td align='right'><input type='submit' name='submit' value='edit' /></td> <td><input type='reset' name='reset' value='batal' /><input type='hidden' name='id' value='".$r[id_user]."'/></td></tr> <tr><td colspan='3' height='35' width='50'> </td></tr> </table></form> ";?> <?php include "boxkanan.php";?> <div id="footer"> Copyright 2009 Designed by crew PK&M </body> </html>
61 Tampilan yang didapat dari script diatas adalah : Gambar tampilan edit_user_admin.php Setelah itu, form action yang dituju adalah edit_user_act.php, scriptnya dibawah ini : <? require_once('autentikasi.php'); require_once('koneksi.inc'); $id=$_post['id']; $nama=$_post['nama']; $pass=$_post['pass']; $pass1=$_post['pass1']; $bidang=$_post['bidang']; $edit1=mysql_query("update user SET username='$username', password='$password', level='$level' WHERE id_user='$id'"); if ($edit1){ header ("location: user.php"); else { echo "Edit Gagal";?>
62 Kemudian untuk link hapus pada tab User, scriptnya adalah dibawah ini dan beri nama file delete_user_admin.php : <?php include "koneksi.inc"; include "autentikasi.php"; $id=$_get['no']; $hapus="delete from user where id_user='$id'"; $result=mysql_query($hapus); if($result==0) { echo "data tidak ada"; else { echo "<font color='#ff0000' face='verdana' size='3'>data user dengan nomor id $id berhasil dihapus!</font>"; include "user.php";?> Halaman Logout Untuk membuat halaman logout, ketikkan script dibawah ini dan beri nama Logout.php : <?php session_start(); unset($_session['sess_name']); unset($_session['sess_pass']);?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>logged Out</title>
Materi. I. Pengenalan HTML II. Basic Tag HTML III. Table IV. Image
Pengenalan HTML Materi I. Pengenalan HTML II. Basic Tag HTML III. Table IV. Image I. Pengenalan HTML WWW HTML Browser dan Editor I. PENGENALAN HTML World Wide Web Internet merupakan jaringan global yang
Bab 1. HTML (Hypertext Markup Language) A. World Wide Web
Bab 1 HTML (Hypertext Markup Language) A. World Wide Web Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainnya di seluruh dunia, TCP/ IP menjadi protocol penghubung
Keterampilan Komputer. 8. Pengenalan HTML
Keterampilan Komputer 8. Pengenalan HTML Table of Contents: World Wide Web (WWW) HyperText Markup Language (HTML) Browser dan Editor Tag-tag HTML Struktur HTML document Elemen Dasar HTML 2 Objectives Setelah
Halaman Utama. Tampilan Menu. Universitas Sumatera Utara
Halaman Utama Tampilan Menu Tampilan Galeri Tampilan Admin Listing Program Halaman Utama
Pengantar HTML. Achmad Fadlil Chusni, S.Kom, M.MT
Pengantar HTML Achmad Fadlil Chusni, S.Kom, M.MT Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat: Memahami konstruksi dasar halaman web. Mengerti tentang WWW Mengerti tag-tag dasar HTML
1. Teori MODUL 1 HTML. Tujuan: Mampu menjelaskan pengertian HTML,Struktur Dasar, Tag Tag HTML, dan mampu membuat aplikasi dengan menggunakan tag HTML
MODUL 1 HTML Tujuan: Mampu menjelaskan pengertian HTML,Struktur Dasar, Tag Tag HTML, dan mampu membuat aplikasi dengan menggunakan tag HTML Tugas Pendahuluan 1. Apakah yang anda ketahui tentang World Wide
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-3 (HTML) Oleh: Noor Ifada S1 Teknik Informatika - Unijoyo 1 HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan
HTML (Hypertext Markup Language)
1 HTML (Hypertext Markup Language) HTML atau Hypertext Markup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen (web page) dan aplikasi yang berjalan di halaman web. Dokumen HTML
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-2 (HTML) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan HTML? Istilah-istilah dalam HTML Tag Utama dalam struktur
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-2 (HTML) Noor Ifada S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan HTML? Istilah-istilah dalam HTML Tag Utama dalam struktur dokumen HTML Contoh HTML
P - 5 Bab 4 : HTML (Hypertext Markup Language)
P - 5 Bab 4 : HTML (Hypertext Markup Language) 4.1 Tujuan Mengerti konsep dasar, struktur, gaya penulisan, sound & background sound, hyperlink serta images, table, form & frame HTML. 4.2 Materi 1. Konsep
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
TUTORIAL APLIKASI WEB Dengan PHP dan MySQL
TUTORIAL APLIKASI WEB Dengan PHP dan MySQL Tutorial Aplikasi Web Dengan PHP dan MySQL A. DASAR TEORI PHP merpakan bahasa pemrograman yang sangat popular dalam pengembangan website dewasa ini, pada dasarnya,
Cara Membuat website dengan Dreamweaver
Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See
PEMROGRAMAN WEB 1 (PART 2) Berbagai macam Tag HTML. Rio Andriyat Krisdiawan, M.Kom
PEMROGRAMAN WEB 1 Berbagai macam Tag HTML (PART 2) Rio Andriyat Krisdiawan, M.Kom Tag Subscript dan SuperScript Subscript biasanya digunakan untuk Menurunkan posisi karakter atau lebih rendah dari teks
Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna
Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah
TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan
Syntax HTML. Biasanya digunakan untuk menulis komentar, tidak akan timbul dihalaman web.
Syntax HTML Pada tulisan Saya kali ini, Saya memberikannya beserta contoh kode dan gambar, ada beberapa yang Saya tidak beri kode dan gambar, kode, dan gambar sekalipun karena beberapa alasan : Kurangnya
Iankee.mualdo@gmail.com PENGENALAN WEBSITE HTML CSS Mengenal CMS ( Content Management System) Iankee.mualdo@gmail.com PENGENALAN WEBSITE HTML CSS Mengenal CMS ( Content Management System) Iankee.mualdo@gmail.com
Dasar-dasar Web dan HTML Minggu I. Pemrograman Web - Rosa Ariani Sukamto
Dasar-dasar Web dan HTML Minggu I Pemrograman Web - Rosa Ariani Sukamto Email: rosa_if_itb_01@yahoo.com Ngapain Sih? Ya Belajar Membuat website dengan HTML dan PHP Layanan-layanan Internet layanan informasi
Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa
Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa Tujuan Kuliah Mampu Menjelaskan mengenai: Pengertian struktur dasar tag-tag HTML membuat aplikasi dengan perintah-perintah HTML HTML Hyper Text Markup
Bahasa yang digunakan untuk menampilkan informasi pd halaman web. bahasa ini menggunakan tanda (markup) untuk menandai perintahperintahnya
Pertemuan 2 1 Bahasa yang digunakan untuk menampilkan informasi pd halaman web. bahasa ini menggunakan tanda (markup) untuk menandai perintahperintahnya menentukan tampilan suatu teks dan tingkat kepentingan
BAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
XHTML dan Dasar-dasar CSS XHTML
XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto Email: rosa_if_itb_01@yahoo.com Blog: http://udinrosa.wordpress.com Website: http://www.gangsir.com XHTML Extensible Hypertext Markup Language
HTML.
HTML www.amikom.info HTML HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumendokumen web yang
1. Pengenalan HTML. 2. Tag Dasar HTML
1. Pengenalan HTML 1.1. Sejarah Singkat HTML HTML dibuat oleh Tim Bernels-Lee seorang ahli Fisika ketika masih bekerja untuk CERN (organisasi Eropa untuk riset nuklir) dan dipopulerkan pertama kali oleh
Membuat Login Dengan PHP dan MYSQL
Membuat Login Dengan PHP dan MYSQL Ramdhan Indra Bangun dadhan.rpl@gmail.com :: Abstrak Aplikasi login User dalam suatu situs dinamis menggunakan php sudah hamper menjadi kebutuhan wajib. Tanpa adanya
MATERI III PEMFORMATAN TEXT HTML
MATERI III PEMFORMATAN TEXT HTML Tujuan : 1. Memahami tentang format page break 2. Memahami tentang pengaturan berbagai macam teks. A. Pemformatan Page Break Tag di gunakan untuk memulai baris baru
Chapter 3. Grouping Elemen, Penomoran ( listing ), Hyperlink dan Image
Chapter 3. Grouping Elemen, Penomoran ( listing ), Hyperlink dan Image 3.1. Grouping Element Tag DIV dan SPAN digunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline
HTML Dasar. PERTEMUAN 1 Tujuan: 1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML 2. Siswa dapat membuat tabel dan pengaturannya
HTML Dasar Tujuan: Siswa dapat membuat desain situs menggunakan pemrograman web PERTEMUAN 1 Tujuan: 1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML 2. Siswa dapat membuat tabel dan pengaturannya
Pemrograman Web. HTML Lanjut. Indrato, S.Kom List. Ordered Lists (OL) Ordered List (OL) Ordered List (OL) PemrogramanWeb.
Pemrograman Web Indrato, S.Kom indra.ndr7@gmail.com HTML Lanjut Page 2 List Digunakan untuk membuat daftar, terdiriatas: Ordered List (Numbering) Unordered List (Bullet) Definition List Ordered Lists (OL)
4. Berikut ini termasuk tag tag yang biasanya diletakkan di dalam kelompok tag Body, kecuali. a. bgcolor c. link b. font d. meta
LATIHAN SOAL HTML DASAR 1 1. Singkatan HTML adalah. a. Hyper Text Markup Language b. Hygher Text Markup Language c. Hyper Terminal Markup Language d. Hyper Text Make Language 2. Dibawah ini merupakan tag
HTML Dasar Pertemuan - 2
HTML Dasar Pertemuan - 2 Semester Ganjil 2009/2010 HTML? Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser. HTML berupa kode
Menangani Input dari User
Menangani Input dari User PHP Programming Language Workshop For Newbie Class Yan Friskantoni
KONSEP DASAR HTML. HTML ( HyperText Mark up Language )
KONSEP DASAR HTML HTML ( HyperText Mark up Language ) hypertext adalah kata yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskahnaskah lainnya markup menunjukkan bahwa pada file HTML berisi
E-trik Ajax. Database MySQL. Dedi Alnas
E-trik Ajax Database MySQL Dedi Alnas Pengenalan MySQL Tutorial kali ini akan membahas cara pembuatan aplikasi web yang dapat dihubungkan dengan MySQL. Pada paket instalasi Xampp terdapat MySQL dan phpmyadmin.
HTML. Hypertext Markup Language. Pemrograman Web 1. Genap
HTML Hypertext Markup Language Pemrograman Web 1 Genap 2009 2010 HTML HTML? Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser.
DASAR HTML UNTUK PEMULA
DASAR HTML UNTUK PEMULA Dian Propa, dianpropa@gmail.com HTML atau Hypertext Markup Language merupakan protokol yang digunakan untuk mentransfer data atau document dari web server ke browser, seperti Internet
2) HEAD <HEAD></HEAD>
PENGENALAN HTML - 1 A. Pendahuluan HTML (Hyper Text Markup Language) sebagai bahasa pemrograman dasar dan wajib dikuasai oleh seorang webmaster. HTML terdiri dari tag-tag yang fungsinya untuk membuat dokumen
MODUL I PENGENALAN HTML. a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2.
MODUL I PENGENALAN HTML A. MAKSUD DAN TUJUAN 1. Maksud a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2. Tujuan a. Mahasiswa dapat membuat
MODUL 11 MEMBUAT LOGIN USER
MODUL 11 MEMBUAT LOGIN USER Halaman web adalah suatu halaman rumah di dalam dunia maya, di sini kita dapat menampilkan tentang segala inspirasi, imajinasi, mimpi maupun uneg-uneg sekalipun. Ibarat sebuah
BAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
LAMPIRAN. Lampiran 1 Wawancara dengan Bapak Thoriq Rachmat selaku Manager IT di PT. 1. Apakah perusahaan saat ini membutuhkan sistem server yang baru?
LAMPIRAN Lampiran 1 Wawancara dengan Bapak Thoriq Rachmat selaku Manager IT di PT. Indonesia News Center. 1. Apakah perusahaan saat ini membutuhkan sistem server yang baru? Jawab: Ya, kami membutuhkan
CSS Cascading Style Sheet
CSS Cascading Style Sheet Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style
LAMPIRAN LISTING PROGRAM WEBSITE
LAMPIRAN LISTING PROGRAM WEBSITE 1. Halaman Home (index.php) $judul_hal=home; function isi() include("koneksi.php");
6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco
6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan
Review Pemrograman Web I
Review Pemrograman Web I Pemrograman Web II Ganjil 2010 2011 Intro Mata kuliah : Pemrograman Web 2 SKS : 3 Jenis : Mata kuliah wajib Pertemuan : 14 pertemuan kelas Periode : Ganjil 2010 2011 Dosen : Sandra
Praktikum 3 Cookie, Session, dan Database MySQL
Praktikum Cookie, Session, dan Database MySQL Tujuan Praktikum : Memberikan pemahaman kepada mahasiswa tentang cookie dan bagaimana menggunakannya. Memberikan pemahaman kepada mahasiswa tentang session
BAB I PENDAHULUAN. Masalah pendidikan tidak dapat lepas dari masalah pembelajaran, karena
BAB I PENDAHULUAN A. Latar Belakang Masalah pendidikan tidak dapat lepas dari masalah pembelajaran, karena pembelajaran merupakan inti dari proses peningkatan kualitas pendidikan. Peningkatan kualitas
Modul 3 CSS CASCADE STYLE SHEET
Modul 3 CSS CASCADE STYLE SHEET Fungsi: Mengatur style elemen yang ada di halaman web, mulai dari memformat text dan format layout. Mengatur kekonsistenan style pada elemen tertentu Keuntungan CSS: Ukuran
1. Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah.
A SOAL PILIHAN GANDA 1 Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah A ikan Badut (Clownfish) B ikan Badut (Clownfish) C
HTML. ( HyperText Markup Language) Pertemuan 2 Oleh : Nufan Balafif. Mata Kuliah : Pemrograman Berbasis Web
HTML ( HyperText Markup Language) Mata Kuliah : Pemrograman Berbasis Web Pertemuan 2 Oleh : Nufan Balafif html (hypertext markup language) Adalah bahasa pemrograman Web (client) yang dikhususkan untuk
BAB 1 PENGENALAN HTML
1 BAB 1 PENGENALAN HTML HyperText Markup Language (HTML) merupakan bahasa standar yang digunakan untuk membuat sebuah tampilan halaman website. Sesuai dengan namanya yaitu HyperText Markup Language (HTML)
Prak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com
Prak. E-Bussiness & E-Commerce HTML (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com Pendahuluan HTML adalah sebuah bahasa markup yang digunakan untuk membuat
FORMAT TEXT. Tag Attribut Value Keterangan. RGB(red,green,blue) Kode Warna. Memberikan warna terhadap background web mengatur posisi text rata kiri
FORMAT TEXT Tag Attribut Value Keterangan Body P (Paragraf) H (Heading) ol (Order List) ul (UnOrder List) Font marquee align RGB(red,green,blue) Kode Warna justify Memberikan warna terhadap background
Script PHP dan MySQL J A M K E E M P A T
J A M K E E M P A T Script PHP dan MySQL l l l l l l Membuat Koneksi ke Server Menyeleksi Database Mengakses Query Menampilkan Hasil Query Latihan Jam Keempat Soal Jam Keempat Membuat Koneksi ke Server
HTML Dasar & Layouting (tag, elemen, atribut, link, frame, table) Pengembangan Web (IT133) Ramos Somya, S.Kom., M.Cs.
HTML Dasar & Layouting (tag, elemen, atribut, link, frame, table) Pengembangan Web (IT133) Ramos Somya, S.Kom., M.Cs. HTML HyperText Markup Language HTML bahasa pemrograman HTML markup language Digunakan
Membuat Database mysql dengan PhpMyAdmin
Materi artikel : Membuat database mysql dengan PhpMyadmin View Insert Edit Delete Searching Membuat Hitcounter dengan file teks Syarat : Mengerti penggunaan tag HTML Browser dapat mengenali sintak Php
ULANGAN UMUM SEKOLAH SMA ISLAM AL-IZHAR PONDOK LABU TAHUN PELAJARAN 2012/2013
1. Istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan, yang dikirimkan ke pengguna akhir melalui internet untuk di publish adalah. A. Website D. Web Designer B. Web Design.
Penulis :
Daftar Isi Dasar-Dasar HTML Cara Membuka Notepad dan Structure Dasar HTML 1 Heading dan Cara Menyimpan dengan Ekstensi HTML 4 Basic HTML Code 6 Style 11 Formating 18 Dasar Dasar HTML Cara Membuka Notepad
Web dan HTML Dasar. Siti Maesyaroh, M.Kom
Web dan HTML Dasar Siti Maesyaroh, M.Kom 1 Pengenalan Word Wide Web What is an Word Wide Web? Protocol Address HTML 2 Pengenalan Word Wide Web Bagaiman Word Wide Web bekerja? Informasi disimpan dalam dokumen
LAMPIRAN LISTING PROGRAM HALAMAN WEBSITE
LAMPIRAN LISTING PROGRAM HALAMAN WEBSITE 1. Script banner.php
PENGANTAR INTERNET & DESAIN WEB
Program Studi Manajemen Informatika Fakultas Bisnis Dan Teknologi Informasi Universitas Teknologi Yogyakarta PENGANTAR INTERNET & DESAIN WEB Ganjil 2012-2013, S.Kom HTML Dasar Definisi HTML Kemampuan HTML
HTML. Hipertext Markup Language
HTML Hipertext Markup Language HTML HTML? Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser. HTML berupa kode - kode tag yang
Soal Remedial Prakarya-1
Soal Remedial Prakarya-1 Kerjakan soal ini, dengan memilih salah satu jawaban yang benar. Perhatikan petunjuk: a. Pilihan jawaban yang benar dengan cara memblok pada soal tersebut. b. Dan kirim soal dan
Lampiran 1. Flowchart perancangan sistem
Lampiran 1. Flowchart perancangan sistem Mulai Identifikasi Data Desain Program Desain Basis Data Input Data Desain Layout Programming Diagnosa Program idak Benar idak a Uji ampilan Data Benar idak a Dokumentasi
MODUL 1 HTML. (HyperText Mark-Up Language)
MODUL 1 HTML (HyperText Mark-Up Language) Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang Pertemuan 1 1.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah perintah dasar HTML 2. Mahasiswa
STRUKTUR DASAR HTML. Presented by: Moh. Sulhan 2009
STRUKTUR DASAR HTML Presented by: Moh. Sulhan : sulhan@ukanjuruhan.ac.id @ 2009 Stuktur Dasar HTML Ekstensi / nama ahiran dari file adalah :.html /.htm Tag HTML tidak bersifat case sensitive Struktur dasar
BAB IV IMPLEMENTASI SISTEM DAN PENGUJIAN
BAB IV IMPLEMENTASI SISTEM DAN PENGUJIAN 4.1 Implementasi Implementasi diterapkan dengan maksud agar sistem yang telah dibuat dapat berjalan secara efektif dan dapat membantu kebutuhan operator dilapangan
Checkbox dengan Foreach dan MYSQL
Checkbox dengan Foreach dan MYSQL Dwi Jayanthi dwi1607@gmail.com Abstrak Pada tutorial ini, kita akan membahas tentang Insert Data Checkbox dengan Foreach ke database MySQL. Komponen Checkbox merupakan
Create Read Update Delete using PHP MySql
2016 Create Read Update Delete using PHP MySql CRUD TABEL ALUMNI DWI SETIYA NINGSIH // 210 315 70 25 [COMPANY NAME] [Company address] SS Program Gambar 1.1 Tampilan index.php Gambar 2.1 Tampilan edit.php
1. #**# merupakan karakter yang terdapat pada type data a. text b. password c. radio d. submit e. file jawaban : b
1. #**# merupakan karakter yang terdapat pada type data a. text b. password c. radio d. submit e. file 2. Perintah untuk mengosongkan kolom pada HTML adalah a. tr b. br c. td d.   e. &nsp jawaban :
Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web
MODUL TIK KELAS XI SEMESTER I TAHUN AJARAN 2008-2009 2009 SMA KOLESE DE BRITTO YOGYAKARTA Modul dapat di download di: Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman
Edisi UNIVERSITAS NEGERI SEMARANG. Badan Pengembangan Teknologi Informasi dan Komunikasi. Modul Pelatihan H T M L
Edisi 1 UNIVERSITAS NEGERI SEMARANG Badan Pengembangan Teknologi Informasi dan Komunikasi Modul Pelatihan H T M L U N I V E R S I T A S N E G E R I S E M A R A N G Modul Pelatihan HTML Akhmad Munawar http://about.me/akhmad.munawar
LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :
LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka
Tampilan di website (Tidak Tampil karena hanya memberi informasi bagi pembuat )
MEMBUAT WEBSITE DENGAN HTML Dibuat oleh : Dea Arri Rajasa, SE., S.Kom HTML (Hyper Text Markup Language) STRUKTUR HTML Judul Website ditulis disini Kode kode HTML
MODUL HTML 2015 MODUL I PENDAHULUAN
MODUL I PENDAHULUAN HTML merupakan singkatan dari Hyper Text Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang
Materi 2 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com
Materi 2 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Nama Mahasiswa NIM Kelas Kompetensi Dasar 1. Memahami cara kerja world
DESAIN WEB STATIS DAN HTML. Dahlan Abdullah Website :http://dahlan.unimal.ac.id
DESAIN WEB STATIS DAN HTML Dahlan Abdullah Email : dahlanrpl@yahoo.com Website :http://dahlan.unimal.ac.id HALAMAN WEB KONSEP DASAR DAN TEKNOLOGI WEB World Wide Web secara luas lebih dikenal dengan istilah
Membuat Form login dengan Php dan Mysql
Membuat Form login dengan Php dan Mysql 13 Hey,,,selamat malam semuanya,,kali ini ane mau membagikan bagaimana cara membuat Form login dengan php dan mysql... Yah kya gtulah kurang lebih intronya,,langsung
Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web
HTML DASAR BAGIAN 1 Oleh: Heribertus Heri Istiyanto Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web Materi: 1. HTML Dasar 2. Desain Layout di Photoshop 3.
C. Ms Powerpoint D. Notepad E. Ms Acces
1. Apakah kepanjangan dari HTML? A. Hyper Text Mark Up Language B. Hyper Text Mark Language C. Hight Text Mark Up Language D. Hight Text Mark Language 2. Berikut ini adalah termasuk Software Browser, Kecuali:
Pemrograman Web I (HTML Lanjut) Oleh: Devie Rosa Anamisa
Pemrograman Web I (HTML Lanjut) Oleh: Devie Rosa Anamisa Tujuan Kuliah Mampu Menjelaskan mengenai: format teks Table Frame Form Hyperlink pada HTML Lanjut Format Teks Ada beberapa fasilitas tag yang dapat
SEARCHING, EDIT / UPDATE DAN DELETE. PHP & MYSQL Part Two
SEARCHING, EDIT / UPDATE DAN DELETE PHP & MYSQL Part Two Maskie Z.O Review Project yang telah dibuat sebelumnya : Cek.php (Session) Index3.htm l Login1.php List1.ph p FmSiswaIn.P hp FmSiswaSim. php Index3.Html
Tutorial HTML. Oleh: Willy Bayuardi Suwarno, SP, MSi. Dipublikasi di tanggal 7 Mei 2008
Tutorial HTML Oleh: Willy Bayuardi Suwarno, SP, MSi willy@ipb.ac.id Dipublikasi di http://willy.situshijau.co.id tanggal 7 Mei 2008 Artikel ini dapat digunakan dan disebarkan secara bebas, baik sebagian
Pengenalan Script. Definisi HTML
1 Pengenalan Script Pada bab ini akan dibahas bahasa script yang dapat digunakan untuk membuat halaman web. Untuk dapat membuat halaman web bahasa script pertama yang harus anda kenal adalah HTML. HTML
2011 Ahmad Amarullah
1 Silabus Mata Kuliah Program Studi : Sistem Informasi Kode Mata Kuliah : Nama Mata Kuliah : Komputer Aplikasi IT ( XHTML & CSS ) Jumlah SKS : 2 SKS Semester : 1 Deskripsi Mata Kuliah : Mata kuliah ini
MODUL 1 PENGENALAN HTML
MODUL 1 PENGENALAN HTML TUJUAN PRAKTIKUM : 1. Praktikan memahami tentang HTML, CSS, frame dan JS pada HTML serta kegunaannya. 2. Praktikan memahami bagaimana cara membuat web menggunakan HTML, CSS dan
Membuat Toko Buku dengan PHP - MySQL
Membuat Toko Buku dengan PHP - MySQL Iman Amalludin iman.llusion@gmail.com :: http://blog.imanllusion.hostzi.com Abstrak PHP. Apa itu? PHP (Hypertext Preprocessor) adalah bahasa skrip yang dapat ditanamkan
Pemrograman Web Week 2. Team Teaching
Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting
MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL
MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL A. MAKSUD DAN TUJUAN 1. MAKSUD a. Merapikan teks yang berupa daftar (list) dan table dengan tag HTML b. Membuat halaman web terhubung dengan halaman
HTML : Apa itu? HTML = Hyper Text Markup Language. HTML adalah dokumen text yang bisa dibaca untuk dipublikasikan di World Wide Web (WWW)
MK MK Desain Desain Grafis Grafis Web Web 2002/2003 2002/2003 by by Ido Ido Priyana Priyana Hadi Hadi :: HTML : Apa itu? HTML = Hyper Text Markup Language HTML adalah dokumen text yang bisa dibaca untuk
Pemrograman Web WEEK 03 HTML LANJUT
1 Pemrograman Web WEEK 03 HTML LANJUT 2 Introduction IMAGE HYPERLINK IMAGE MAP DIV & SPAN META 1 HTML Image 3 Menampilkan gambar pada halaman web Tag: (tidak memiliki tag penutup) align Atribut Value
HTML (HYPERTEXT MARKUP LANGUAGE)
HTML (HYPERTEXT MARKUP LANGUAGE) HTML merupakan Script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML sendiri terdiri dari tag-tag yang fungsinya untuk membuat dokumen
CSS (Cascade Style Sheet)
CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa
HTML Dasar HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs.
HTML Dasar HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs. Untuk belajar HTML dasar sebaiknya Anda ketikkan di Notepad. Bentuk umum:
Teks dan Background SERIF SANS-SERIF MONOSPACE
Tujuan Teks dan Background Mahasiswa dapat memahami pengaturan teks melalui CSS Mahasiswa dapat memahami berbagai jenis ukuran teks Mahasiswa dapat memahami pengaturan background melalui CSS Dasar Teori
Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat
Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI
Pemrograman Internet by Susiana Sari, S.Kom
1 Muara Teweh, 01 April 2009 Susiana Sari, S.Kom Manajemen Informatika Politeknik Muara Teweh STRUKTUR DASAR HTML : sebagai tanda awal dokumen : sebagai informasi page header : sebagai
PRAKTIKUM I MySQL / phpmyadmin
PRAKTIKUM I MySQL / phpmyadmin I.ATujuan 1. Mengerti dan memahami database, tabel, field dan record 2. Dapat membuat database dan tabel 3. Dapat memodifikasi database dengan perintah SQL I.B.Alat & Bahan