DASAR-DASAR WORLD WIDE WEB (WEBSITE) O LE H : A RI RI K JAPI K, S. KOM

DASAR-DASAR WORLD WIDE WEB (WEBSITE)

O L E H : A R I R I K J A P I K, S . KO M

copyright by : japikinfo.com 2017

Konsep Dasar Web 



World Wide Web (WWW) / Web menggunakan HTTP (HyperText Transfer Protokol) sebagai protokol komunikasi dan menyampaikan informasi berbasis web kepada pemakai dalam bentuk HTML (HyperText Markup Language).


 





Apa yang dimaksud DNS? DNS singkatan dari Domain Name System atau sisem penamaan domain Adalah alamat permanen situs di dunia internet. Identifikasi sebuah situs. Istilah yang umum digunakan adalah URL. (Uniform Resource Locator) copyright by : japikinfo.com 2017

Generic Domains 









.com: commercial http://www.kompas.com .org :organisasi non komersial http://www.wikipedia.org .edu/ .ac.id : dunia pendidikan http://www.upi.edu .go.id : pemerintahan http://www.bandung.go.id .or.id :organisasi non profit copyright by : japikinfo.com 2017 http://www.ipi.or.id

Apakah yang dimaksud Hosting ? 

Hosting: ruangan yang terdapat menyimpan berbagai data, file-file


 



Web terdiri atas 2 Jenis: Web statis : merupakan website yang contentnya jarang diubah. Misalnya, web profil organisasi. Web dinamis : dapat dikoneksikan dengan database, perubahan informasi melalui perubahan data. misalnya website berita, seperti, kompas.com, detik.com, kapanlagi.com copyright by : japikinfo.com 2017

Jenis-jenis website Jenis-jenis web berdasarkan tujuannya adalah :  Personal web, website yang berisi informasi pribadi seseorang.  Corporate web, website yang dimiliki oleh perusahaan.  Portal web, website yang mempunyai banyak layanan, mulai dari layanan berita, email, jasa dan lainnya.  Forum web, sebuah web yang bertujuan sebagai media diskusi. copyright by : japikinfo.com 2017

http:desmav3.wordpress.com

Personal web: website yang berisi informasi pribadi seseorang


Corporate web 

c


Portal web


Website Toko Online


Forum Web : web media diskusi


Arsitektur Web




Web Server adalah server yang melayani permintaan klien terhadap halaman Web.



Middleware adalah perangkat lunak yang bekerja sama dengan Web server dan berfungsi menerjemahkan kode-kode tertentu,

menjalankan kode-kode tersebut, dan memungkinkan berinteraksi dengan basis data. 

Browser atau Web browser adalah perangkat lunak di sisi klien

yang digunakan untuk mengakses informasi Web.


HTTP 

HTTP merupakan protokol client-server yang digunakan

sebagai dasar peraturan dalam pertukaran file (teks, gambar, grafik, suara, video dan file multimedia lainnya). 

Protokol HTTP bersifat request-response, yaitu dalam

protokol ini client menyampaikan pesan request ke server dan server kemudian akan memberikan respon yang sesuai dengan request tersebut. 

Secara umum, HTTP bekerja pada port 80, pada jaringan TCP/IP.


Software yang di butuhkan 





Aplikasi Web Editor : Notepad++, Adobe Dreamweaver CS Aplikasi Image Processing : Adobe Photoshop Aplikasi Web Server : XAMPP


Pengenalan HTML

Pemograman Web Design Oleh :

Aririk Japik, S.kom copyright by : japikinfo.com 2017

Apa itu HTML ? 



HTML (Hypertext markup language) adalah suatu bahasa markup (bertanda) dengan menggunakan rangkaian teks tertentu (tag) atau simbol untuk untuk menampilkan dokumen web

Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu (tag) untuk menjadi dokumen HTML (file *.htm atau *.html).


Pengenalan HTML Software yang diperlukan:  Text editor sederhana. Contoh: Windows: Notepad , Notepad ++, dREAMWEAVER Linux: gEdit, mcedit, pico, dan vi.  Web browser untuk menampilkan dokumen web yang dibuat. Contoh: Windows: Internet Explorer, Opera dan Firefox Linux: Firefox dan Conqueror. copyright by : japikinfo.com 2017

Istilah-istilah dalam HTML: Tag Element Attribute


Istilah – Istilah dalam HTML TAG  Kode khusus yang merupakan komponen fundamental pada dokumen web dan akan dikenali oleh browser  Nama tag ditulis di dalam tanda < > dan untuk tag penutup tambahkan tanda  Boleh ditulis dengan huruf besar maupun kecil  Digunakan sepasang, contoh :
dan


Istilah – Istilah dalam HTML Element Jenis-jenis dari tag. HTML mempunyai banyak elemen untuk berbagai keperluan dengan berbagai bentuk penggunaan. copyright by : japikinfo.com 2017

Element adalah isi dari tag yang berada diantara tag pembuka dan tag penutup, termasuk tag itu sendiri dan atribut yang dimikinya (jika ada). Sebagai contoh

perhatikan kode HTML berikut:
Ini adalah sebuah paragraf
Pada contoh diatas, “
Ini adalah sebuah paragraf
” merupakan element p. Element tidak hanya berisi text, namun juga bisa tag lain.


Pengenalan HTML ATRIBUT Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya akan mempunyai banyak atribut. Href, size,color, dll VALUE Nilai dari suatu atribut contoh :


Pengenalan HTML STRUKTUR DASAR DOKUMEN HTML  





Tag utama adalah , , Tag HTML berfungsi untuk menyatakan bahwa dokumen tersebut adalah dokumen HTML Tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML tersebut Tag BODY berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML copyright by : japikinfo.com 2017

Pengenalan HTML STRUKTUR DASAR DOKUMEN HTML 

Struktur Dokumen akan terlihat :

bagian head bagian body copyright by : japikinfo.com 2017

Pengenalan HTML TITLE  Untuk membuat judul pada suatu dokumen web, digunakan tag ..  TITLE bukanlah bagian dari teks dokumen dan hanya berada pada bagian HEAD 

TITLE biasanya ditampilkan oleh browser pada title bar dari jendela browser dan biasanya berfungsi sebagai label dari jendela browser tersebut copyright by : japikinfo.com 2017

Tag Utama dalam struktur dokumen HTML: Judul / Title Isi / Content copyright by : japikinfo.com 2017

Lat1.html <TITLE>Judul Halaman Isi dokumen copyright by : japikinfo.com 2017

Contoh Website Pertama Ku HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. copyright by : japikinfo.com 2017

Lat2.html <TITLE>Judul Halaman Isi dokumen copyright by : japikinfo.com 2017

Memformat Dokumen HTML Tag
/ Line Break pindah baris Hari ini Belajar Web 1
Mudah2an dapat ilmunya 


/ Paragraph Pemisahan Paragraf
World Wide Web (WWW) / Web menggunakan HTTP (HyperText Transfer Protokol) sebagai protokol komunikasi dan menyampaikan informasi berbasis web kepada pemakai dalam bentuk HTML (HyperText Markup Language).

HTML adalah suatu bahasa mark up (bertanda) dengan menggunakan rangkaian teks tertentu (tag) atau simbol untuk mengidentifikasikan berbagai bagian dari halaman web.
copyright by : japikinfo.com 2017 

/ Horizontal Ruler Atribut Fungsi align Merupakan posisi vertikal garis perintah. Nilainya adalah left, right atau center. width Lebar dari garis batas. Nilai yang dimasukkan dapat berupa pixel ataupun persen dari lebar jendela browser. size Menentukan tebal garis batas noshade Menonaktifkan efek tiga dimensi 

color

Menentukan warna garis batas copyright by : japikinfo.com 2017

ex: Menggunakan Garis Batas Garis batas biasa
Garis batas dengan posisi di kanan, lebar 250 pixel, warna merah
Garis batas dengan tebal 3 pixel, tanpa efek tiga dimensi

Memformat Dokumen HTML 

Tag / Heading

Heading
Ini Heading 1

Ini Heading 2

Ini Heading 3

Ini Heading 4

Ini Heading 5

Ini Heading 6


Memformat Dokumen HTML 

Tag <pre> / Preview

pre <pre> for I = 1 to 10 for j = 1 to 5 A(I,j) = i*j next next


Tag List

Untuk membuat daftar pada HTML, kita bisa menggunakan tag List.

Unordered List (Bullet) bullet

Honda

Yamaha

Suzuki



type bullet

Honda

Yamaha

Suzuki


Tag List Ordered List (Numbering) 1 dengan penomoran 1, 2, 3 … A dengan penomoran A, B, C … a dengan penomoran a, b, c … numbering I dengan penomoran I, II, III … i dengan penomoran i, ii, iii …

Sistem Informasi

Teknik Informatika

Sistem Komputer




Tag Atribut

Fungsi

face

Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yang paling kiri. Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal (#000000 - #ffffff) Untuk menentukan ukuran dari font 1 - 7

color

size


Tag Ex:

Penggunaan Tag Arial Times New Roman


Menambahkan Gambar Atribut

Fungsi

src

•Top, bottom, middle digunakan untuk menentukan posisi gambar terhadap teks · Left, right, center untuk menentukan posisi gambar di dokumen

width

Menentukan lebar dari gambar dalam pixel

height

Menentukan tinggi dari gambar dalam pixel

alt

Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan. (Pada browser tertentu dapat pula ditampilkan sebagai tool tip) copyright by : japikinfo.com 2017

Menambahkan Gambar ex: Menambahkan gambar


Menggunakan Link Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika link diklik, maka dokumen HTML akan menuju ke alamat tersebut. Link berhubungan erat dengan apa yang disebut anchor. Anchor merupakan sesuatu yang dapat digunakan untuk menandai sebuah dokumen HTML dan bagian yang ditandai tersebut dapat digunakan sebagai link atau alamat tujuan dari link. Sebuah anchor ditandai dengan tag .

Atribut

Keterangan

Href

Digunakan jika sebuah anchor akan digunakan sebagai link Digunakan jika anchor akan digunakan sebagai tujuan

Name


Menggunakan Link Ada 3 jenis link : •Link relatif dibuat apabila kita membuat suatu link pada page kita kepage yg lain pada komputer yang sama, tidak memerlukan menggunakan alamat internet yang lengkap.jika 2 page pada direktori yang sama, dapat menuliskan nama file html sebagai berikut : Klik Disini •Link absolut Dibuat apabila kita membuat link ke page web yang lain yang berada pada website lain diinternet. Dalam hal ini kita harus menuliskan alamat internet secara lengkao, contoh : Link Ke Yahoo •Link dalam dokumen yang sama. Link jenis ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dibrowser web akan mengharuskan kita melakukan scrool layar berulang-ulang.contoh : bagian tentang link # link berada dalam dokumen yang sama copyright by : japikinfo.com 2017

Menggunakan Link ex: Menggunakan Link Klik di sini untuk menuju www.google.com.
Atau dapat juga mengklik gambar ini:

Jika ini yang diklik akan menuju ke bagian tengah dokumen.

Ini adalah bagian bawah dokumen. Atas copyright by : japikinfo.com 2017

Tabel HTML Digunakan untuk menyajikan data dalam bentuk kolom dan baris. 

Elemen-elemen Tabel

Elemen

Penjelasan

…

Mendefinisikan sebuah tabel dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border

….

Menspesifikasikan sebuah baris tabel dalam tabel. Kita dapat mendefinisikan atribut untuk seluruh baris:align(left,center,right) atau valign(top,middle,bottom)

Mendefinisikan sel header table. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah.

Mendefinisikan sebuah sel data tabel.

Colspan=n

Jumlah n kolom sel diperlebar

rowspan=n

Jumlah n baris sel diperbesar


Tabel headers dan Caption

table headers
… default dari judul adalah ditengah pada bagian paling atas tabel. Atribut align=“bottom” dapat digunakan untuk menempatkan judul pada bagian bawah tabel.

….. ……
CP Bill Gates
name telephone email

Bil gates 555 77 854 [email protected]


Latihan, buat table header secara vertikal


Jawab :

vertical headers

CP Bill Gates
Name Bill Gates

Telephone 555 77 854

email [email protected]


Colspan dan Rowspan

untuk mendefinisikan cell table yg dilebarkan lebih dari Satu baris atau satu kolom.

Cell that spans two colomns

Name telephone

Bill Gates 555 77 854 555 77 855


Lat. Buat dengan rowspan tampilan dibawah ini


jawab
Cell that spans two rows

First Name Bill Gates

telephone 555 77 854

555 77 855


CellPadding dan Cellspacing

Cellpadding membuat spasi lebih dari antara sel dan bordernya. Cellspacing menambah jarak antarsel

cellpadding
without cellpadding
first row

second row

with cellpadding first row second row copyright by : japikinfo.com 2017

CellPadding dan Cellspacing

Cellpadding membuat spasi lebih dari antara sel dan bordernya. Cellspacing menambah jarak antarsel

cellpadding
without cellspacing
first row

second row

with cellspacing
first row

second row

lat


Prototipe Website


Rancangan Website

Height : 980px


Width : 780 px

Pengenalan PHP & Mysql Pemrograman Web Design Oleh : Aririk Japik,S.Kom


Pengertian PHP 



PHP (PHP Hypertext Preprocessor) adalah bahasa scripting yang disisipkan dalam dokumen HTML dan dijalankan pada server side. Artinya semua sintaks yang kita berikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja copyright by : japikinfo.com 2017

Client dan Server Dalam dunia internet selalu terdapat dua sisi yang saling mendukung, yaitu : 1. Client  bertugas mengakses informasi yang

disediakan oleh server. Pada layanan web, client dapat berupa web browser. 2. Server  penyedia berbagai layanan termasuk web. Layanan web ditangani oleh sebuah aplikasi bernama web server.


Web Browser 

Perangkat lunak yang digunakan untuk mengakses informasi web Contoh Web Browser  MS Internet Explorer

 Opera Mini  Mozila  Google Chrome

 Netscape Navigator/Communicator copyright by : japikinfo.com 2017

Web Server  Berjalan pada komputer server  Sebagai tempat menyimpan file-file

dokumen web sehingga dapat diakses oleh pengguna internet Contoh-contoh:  Apache = Xampp, Wampp, Apache triad  MS Intenet Information Server (IIS)  Windows  Tomcat (for Java)  Multi copyright by : japikinfo.com 2017

Web Programing Dua kategori web programming:  Server Side Programming  Client Side Programming


Server-side Programming  Server Side

Programming  Dieksekusi di server dan yang dikirimkan hanya hasil ke client  Contoh: CGI/Perl, ASP,

JSP, PHP, CFM


Client-side Programming  Client Side

Programming  Eksekusi simple dan kode program dikirim langsung dengan halaman web  Contoh: JavaScript,

HTML, VBScript, CSS copyright by : japikinfo.com 2017

Sejarah PHP 

PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP bernama FI (Form Interpreted). Pada saat tersebut PHP adalah sekumpulan script yang digunakan untuk mengolah data form dari web.


Kelebihan PHP dari bahasa pemrograman lain  

  

Bahasa pemrograman php adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam penggunaanya. Web Server yang mendukung php dapat ditemukan dimana - mana dari mulai IIS sampai dengan apache, dengan configurasi yang relatif mudah. Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan developer yang siap membantu dalam pengembangan. Dalam sisi pemahamanan, php adalah bahasa scripting yang paling mudah karena referensi yang banyak. PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (linux, unix, windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-perintah system.


Database PHP            



PHP mensupport beberapa database diantaranya adalah : dBase Hyperware IBM DB2 Informix Ingres Interbase MSQL MySQL ODBG Oracle PostreSQL Dll


Sintaks PHP 

1. 2. 3.

tag PHP yang dapat digunakan untuk menandai blok script PHP : <script language=“PHP”….


Statement PHP Statement adalah satuan perintah dalam PHP. Statement harus diakhiri dengan tanda semicolon/titik-koma(;), Contoh Statement :


Expression PHP Ekspresi atau sering juga disebut dengan ungkapan adalah suatu bentuk yang menghasilkan suatu nilai. Contoh expression :  4+5  Penggunaan expression : 


Komentar PHP Comment adalah bagian dari kode yang tidak dieksekusi/dijalankan. Comment dibuat untuk memperjelas atau memberi keterangan pada kode program.  Ada dua cara menulis comment : comment satu baris dan comment banyak baris.  Comment satu baris dibuat dengan menggunakan tanda //. Semua statement yang ada dikanan // tidak dijalankan oleh interpreter. Contoh penggunaan : 





Comment banyak baris dibuat dengan menggunakan pasangan /* dan */. Semua tulisan yang dibuat diantara tanda tersebut tidak akan dieksekusi oleh interpreter. Contoh penggunaan : /* Kode ini akan menampilkan hasil dari 4+5 */

DEKLARASI VARIABLE 





Variabel adalah suatu lokasi dalam memori komputer untuk menyimpan suatu nilai atau data. Isi variabel bisa berubah-ubah selama proses program Dalam PHP setiap nama variable diawali tanda dollar ($). Misalnya nama variable a dalam PHP ditulis dengan $a. Jenis suatu variable ditentukan pada saat jalannya program dan tergantung pada konteks yang digunakan. Aturan pemberian nama variabel :  Dimulai dengan tanda $  Karakter pertama harus huruf atau garis bawah (_)  Karakter berikutnya boleh huruf, angka, atau garis bawah.  Nama variabel bersifat case-sensitive artinya membedakan huruf besar dan kecil, jadi $nAMa beda dengan $nama copyright by : japikinfo.com 2017

Ex: copyright by : japikinfo.com 2017

KONSTANTA 



Konstanta adalah :Sebuah variabel yg mempunyai nilai tetap dan tidak perlu dideklarasikan dengan tanda $. Konstanta dideklerasikan dg menggunakan fungsi define()


Ex: '; echo'Tinggi dari kubus=',$tinggi.'
'; echo'Lebar dari kubus=',lebar.'
'; echo($volume); ?> copyright by : japikinfo.com 2017

Lat1:

Action=coba.php

coba.php Coba
echo "Selamat Datang, $nama!"; echo "
\n"; echo "Hari ini tanggal : " . date("d F Y"); ?> copyright by : japikinfo.com 2017

Latihan Penggunaan Form

$nama=$_POST['nama']; $komentar=$_POST['komentar']; echo "Terima kasih $nama atas komentarnya
Komentar Anda : $komentar"; ?> copyright by : japikinfo.com 2017

login Buatlah form login sederhana yang terdiri dari form berbasis HTML dan file skrip PHP yang digunakan untuk menampilkan data login.


formtransaksi.php

Pensil = 2500 Pena = 3500 Buku =5000


Koding
$jumlah=$_POST['jumlah']; echo "Nama Anda : $nama memesan

$jumlah buah $nabar
"; echo "Terimakasih atas kunjunganya..."; ?>


STRUKTUR KONTROL

IF

Konstruksi IF digunakan untuk melakukan eksekusi suatu statement secara bersyarat. Cara penulisannya adalah sebagai berikut: if (syarat) Atau: { if (syarat pertama) statement { } statement pertama atau: } if (syarat) elseif (syarat kedua) { { statement statement kedua } } else else { { statement lain statement lain copyright by : japikinfo.com 2017 } }

Contoh $b) { echo(“a lebih besar dari pada b”); } elseif ($a<$b) { echo(“a lebih kecil b”); } else { echo(“a sama dengan b”); } ?>


Kalkulator Online


koding
koding

else if($hitung=='-') $hasil=$nil1-$nil2; else if($hitung=='^') $hasil=pow ($nil1,$nil2); else $hasil='masukkan perhitungan dengan benar'; //tampilkan echo"Nama :$nama
"; echo"Hasil dari: $nil1 $hitung $nil2 adalah $hasil
"; } else echo"
Silahkan masukkan data"; ?> copyright by : japikinfo.com 2017

Proses Data


Ketentuan


Code $nama=$_POST[nama]; $kode=$_POST[kode]; $jml=$_POST[jml]; if($nama!='' && $kode!='' && $jml!=''){ echo " Nama Pembeli : $nama
"; echo " Kode Barang : $kode
"; echo "Jumlah Pembelian : $jml
"; if($kode=='B001' || $kode=='b001'){ $harga=500000; $nb="Monitor Samsung 15' ";} else if($kode=='B002' || $kode=='b002'){ $harga=400000; $nb="Monitor LG 14' "; } else if($kode=='B003' || $kode=='b003'){ $harga=300000; $nb="CD-RW Samsung "; }


code2 else if($kode=='B004' || $kode=='b004'){ $harga=450000; $nb="Memory Card 256 "; } else if($kode=='B005' || $kode=='b005'){ $harga=750000; $nb="Printer Canon "; } else echo" Kode Barang yg anda Masukkan salah"; //cari total $tot=$harga*$jml; if($tot>=1000000) $dis=0.1 * $tot; else $dis=0; $ts=$tot-$dis; echo "harga $nb adalah :$harga
"; copyright by : japikinfo.com 2017

Code3 echo"______________________________________________
"; echo"Pembayaran adalah :$tot
"; echo "Diskon yang didapat adalah:$dis
";

echo"---------------------------------------------
"; echo"Total Pembayaran adalah:$ts
";} else

echo" Silahkan Inputkan Semua Data"; ?> copyright by : japikinfo.com 2017

PHP-MySQL PHP  adalah bahasa pemrograman script dipakai untuk memrogram situs web dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain. MySQL  adalah Relational Database Management System (RDBMS) yang didistribusikan secara gratis dibawah lisensi GPL (General Public License). Dimana setiap orang bebas untuk menggunakan MySQL, namun tidak boleh dijadikan produk turunan yang bersifat komersial copyright by : japikinfo.com 2017

Database 

Database adalah sebuah system yang di buat untuk mengorganisasi, menyimpan dan menarik data dengan mudah. Database terdiri dari kumplan data yang terorganisir untuk 1 atau lebih penggunaan. Beberapa Database yang ada saat ini adalah : Mysql, Sql Server, Ms.Access, Oracle, dan PostgreSql. copyright by : japikinfo.com 2017

phpMyAdmin 

Phpmyadmin adalah sebuah aplikasi open source yang berfungsi untuk memudahkan manajemen MySQL. Dengan menggunakan phpmyadmin, anda dapat membuat database, membuat tabel, menginsert, menghapus dan mengupdate data dengan GUI dan terasa lebih mudah, tanpa perlu mengetikkan perintah SQL secara manual


Halaman Php MyAdmin


Membuat Database Baru Buat nama database “dbweb”

Klik Create


Membuat Nama Tabel 

Buat nama tabel dengan nama tbguestbook Isikan field untuk tabel buku tamu



Idguest  Nama  Email  Pesan Klik Go





int varchar varchar text

5 35 40 -

Auto_incremen

Buat Nama tabel dan jumlah field

Klik GO


Merancang Guest Book nama email pesan

Action=“Simpanbukutamu.php” Simpan : bukutamu.php copyright by : japikinfo.com 2017

Ketentuan Untuk melakukan koneksi terdapat beberapa parameter yang dibutuhkan diantaranya : - Server name, merupakan nama server atau no. IP server dimana MySQL tersebut diinstall - Username, merupakan nama user yang diberikan wewenang untuk mengakses database dalam MySQL - Password, merupakan password yang dimiliki username dalam rangka autentifikasi. - Database name, merupakan nama database dalam MySQL yang ingin kita akses. copyright by : japikinfo.com 2017

Koneksi Ke Database copyright by : japikinfo.com 2017

Kode bukutamu simpan Silahkan Inputkan Semua Data
Back"; exit;} else { copyright by : japikinfo.com 2017

lanjutan $input=mysql_query("INSERT INTO tbguestbook VALUES („ ','$nama','$email','$pesan')"); } if(!mysql_query($input)) echo "Guest Book Berhasil Disimpan
Back"; ?> header("location: ../../index.php?module=inputuser"); Penyimpanan kosong echo "<script>window.alert('Pengisian data guestbook belum lengkap'); window.location=('../../index.php?page=inputuser')"; copyright by : japikinfo.com 2017

Tampil Data BukuTamu Buatlah tabel 2 baris dan 5 kolom untuk menampilkan buku tamu

Letakkan kursor pada baris terakhir


Tampilan Pesan Guest Book Kode ini diletakkan dibawah pada nama field terakhir

Tampilan Pesan Guest Book Letakkan kursor pada baris masing-masing kolom

echo echo echo echo

$no; ?> $dataTampil['nama']; ?> $dataTampil['email']; ?> $dataTampil['pesan']; ?>


Hasil tampilan buku tamu

Membuat Link Hapus

Letakkan pada kolom menu dan barisan terakhir kemudian klik kategori Code

">Hapus copyright by : japikinfo.com 2017

bukutamuHapus.php PESAN PADA BUKUTAMU BERHASIL DIHAPUSBack"; ?>


Mengedit Buku Tamu Tampilan edit dengan menggunakan icon gambar

1. Masukkan icon gambar dan letakkan disebelah link hapus. 2. Klik kategori Code untuk membuat link edit "> copyright by : japikinfo.com 2017

Ketikan kode pada masing2 objek

Tampil Edit


Bukutamueditsim.php Silahkan Inputkan Semua Data
Back"; exit;} else { $sqlUbah = "UPDATE tbguestbook SET nama ='$nama', email ='$email', pesan='$pesan' WHERE idguest='$idguest'"; copyright by : japikinfo.com 2017

Bukutamueditsim.php if(mysql_query($sqlUbah)) { echo "Guest Book Berhasil DiUpdate
Back"; } else { echo "Gagal Mengedit Data Buku Tamu"; } } ?>


Updateuser.php Back"; } else { echo "ERROR..!! Gagal ubah user"; } copyright by : japikinfo.com 2017 ?>

Login Data Login adalah tahap awal sebelum masuk ke sebuah intruksi pada web atau sistem. Penggunaan form login untuk menjaga agar lebih aman keberadaan data sangat penting dilakukan. nama sandi

Login.php

Action=“periksalogin.php” copyright by : japikinfo.com 2017

Loginperiksa.php Login Data 0) { copyright by : japikinfo.com 2017

Loginperiksa.php error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); $_SESSION[namaku]=$r['username']; $_SESSION[passku]=$r['password']; $_SESSION[namalengkap]=$r['nama'];

echo "Username dan password Benar

Masuk"; } else { echo "Username dan password Salah
Back";}

?>


Hasil Login Berhasil


Halaman Utama Admin

Silahkan tambahkan gambar pada halaman depan admin


Session Admin Session admin digunakan untuk autentifikasi halaman admin. Artinya setiap akan membuka halaman admin harus login dahulu!

Untuk mengakses halaman ADMIN,
Anda harus login dahulu

LOGIN"; } else { ?> copyright by : japikinfo.com 2017

Isi file

Tabel Berita 

Buat nama tabel dengan nama tbberita Isikan field untuk tabel berita



Idberita int  Judul varchar  isi text  gambar varchar  Pengirim varchar  Tanggal date  Jam time Klik Simpan / save





5 100 100 30 -

Auto_incremen


Input Berita judul

isi

gambar


Membuat Input Tinymce Plugin tinymce

Download filenya pada : http://www.japikinfo.com/semua-download.htmm


Ubah File dashboard.php Memanggil scrip editor

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js">

<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_lokomedia.js"> Buka file input berita rumah id pada textarea menjadi copyright by : japikinfo.com 2017 Catatan! • • • • Gambar yang dimasukkan ke textarea akan tersimpan di folder tinymcpuk/gambar, namun kalau dijalankan secara localhost tidak akan tampil di halaman pengunjung, tapi ketika di online-kan akan tampil (settingannya memang untuk online atau input gambar secara online). Daripada nanti ada yang bertanya, mengapa id='loko'? Silahkan lihat settingannya atau buka file tiny_lokomedia.js yang ada di folder tinymcpuk/jscripts/tiny_mce/. Apakah folder penyimpanan gambar (tinymcpuk/gambar) bisa diubah? Tentu saja bisa, silahkan buka file config.base.php yang ada di folder tinymcpuk/jscripts/tiny_mce/plugins/ajaxfilemanager/inc/, cari kode pada baris 51 dan 52. Apakah folder tinymcpuk boleh diganti? Tentu saja boleh, nanti tinggal sesuaikan saja pemanggilannya pada file media.php yang ada di folder lokomedia/adminweb dan file tiny_lokomedia.js (untuk mengarahkan Browse file gambar) di folder tinymcpuk/jscripts/tiny_mce/. copyright by : japikinfo.com 2017 Simpan berita <?php include "../config/koneksi.php"; //variabel form $judul=$_POST['judul']; $isi=$_POST['isi']; $tanggal=date ("Y-m-d"); $jam = date("h:i:s"); $pengirim=$_SESSION['namaku']; //simpan gambar $lokasi_file = $_FILES['gambar']['tmp_name']; $nama_file = $_FILES['gambar']['name']; $ukuran_file = $_FILES['gambar']['size']; copyright by : japikinfo.com 2017 $direktori = "../foto_berita/$nama_file"; move_uploaded_file($lokasi_file,"$direktori"); $simpan="Insert into tberita Values('','$judul','$isi','$direktori','$pengirim','$tanggal','$jam') "; if(mysql_query($simpan)){ echo "<script>window.alert('Berita Berhasil Disimpan'); window.location=('index.php?page=inputberita')</script>"; } else { echo "Data berita Gagal disimpan <a href='?page=inputberita' rel="nofollow">Back</a>"; } ?> copyright by : japikinfo.com 2017 Tampil Berita copyright by : japikinfo.com 2017 Edit Berita copyright by : japikinfo.com 2017 Tambahan bila gambar kosong $lokasi_file = $_FILES['galeri']['tmp_name']; if (empty($lokasi_file)){ Masukkan kode tanpa memasukkan field gambar //default jkarta date_default_timezone_set('Asia/Jakarta'); copyright by : japikinfo.com 2017 Paging Berita(halaman.php) <?php // class halaman untuk halaman administrator class Paging{ // Fungsi untuk mencek halaman dan posisi data function cariPosisi($batas){ if(empty($_GET['halaman'])){ $posisi=0; $_GET['halaman']=1; } else{ $posisi = ($_GET['halaman']-1) * $batas; } return $posisi; } copyright by : japikinfo.com 2017 Class halaman untuk penomoran halaman // Fungsi untuk menghitung total halaman function jumlahHalaman($jmldata, $batas){ $jmlhalaman = ceil($jmldata/$batas); return $jmlhalaman; } // Fungsi untuk link halaman 1,2,3 (untuk admin) function navHalaman($halaman_aktif, $jmlhalaman){ $link_halaman = ""; // Link halaman 1,2,3, ... for ($i=1; $i<=$jmlhalaman; $i++){ if ($i == $halaman_aktif){ $link_halaman .= "$i | "; copyright by : japikinfo.com 2017 } else{ $link_halaman .= "<a href=$_SERVER[PHP_SELF]?page=$_GET[page]&halaman=$i rel="nofollow"> $i</a> | "; } $link_halaman .= " "; } return $link_halaman; } } ?> copyright by : japikinfo.com 2017 Modif Paging Berita <?php include "../config/koneksi.php"; include "../config/halaman.php"; error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); $p = new Paging; $batas = 5; $posisi = $p->cariPosisi($batas); $sqlTampil = "SELECT * FROM tberita limit $posisi,$batas"; error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); $qryTampil = mysql_query($sqlTampil) copyright by : japikinfo.com 2017 Tampil Halaman </table> <?php //Langkah 3: Hitung total data dan halaman serta link 1,2,3 ... Menampilkan echo " Halaman : "; $tampil2="select * from tberita"; $hasil2=mysql_query($tampil2); $jmldata=mysql_num_rows($hasil2); halaman pada tampil berita $jmlhalaman = $p->jumlahHalaman($jmldata, $batas); $linkHalaman = $p->navHalaman($_GET[halaman], $jmlhalaman); echo “$linkHalaman "; ?> copyright by : japikinfo.com 2017 Tabel Polling  Buat nama tabel dengan nama tbpolling Isikan field untuk tabel polling  idpolling  pertanyaan  jawab1  jawab2  jawab3  jawab4  hasil1  Hasil2  Hasil3  Hasil4  Statusaktif Klik Simpan / save   int varchar varchar varchar varchar varchar int int int int enum(„Y‟,‟N‟) 5 250 100 100 100 100 4 4 4 4 Auto_incremen Default Default Default Default copyright by : japikinfo.com 2017 (0) (0) (0) (0) Input Polling tanya pilih1 pilih2 pilih3 pilih4 Rbstatus (Y,N) copyright by : japikinfo.com 2017 Simpan Polling <?php include "../config/koneksi.php"; $tanya = $_POST['tanya']; $pilih1 = $_POST['pilih1']; $pilih2 = $_POST['pilih2']; $pilih3 = $_POST['pilih3']; $pilih4 = $_POST['pilih4']; $rbStatus = $_POST['rbStatus']; error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); $simpan="Insert into tbpolling Values('','$tanya','$pilih1','$pilih2','$pilih3','$pilih4','','','','','$rbStatus')"; if(mysql_query($simpan)){ echo "<script>window.alert('Polling Berhasil Disimpan'); window.location=('index.php?page=tampilpolling')</script>"; } else { echo "Data polling Gagal disimpan <a href='?page=inputpolling' rel="nofollow">Back</a>"; } ?> copyright by : japikinfo.com 2017 Tampil Polling copyright by : japikinfo.com 2017 Tabel Agenda  Buat nama tabel dengan nama tbagenda Isikan field untuk tabel agenda  idagenda  judul_agenda  jadwal  tempat  keterangan Klik Simpan / save   int varchar varchar varchar text 5 250 50 100 - copyright by : japikinfo.com 2017 auto_incremen Input Agenda Dikosongkan saja Judul Tempat keterangan Action=“submit” Action=“reset” copyright by : japikinfo.com 2017 Pembuatan Tanggal dengan LIST/Menu <?php //membuat tanggal 1-31 pada ComboBox echo "<select name=tanggal> <option value=01 selected>01</option>"; for($tgl=2; $tgl<=31; $tgl++){ $tgl_leng=strlen($tgl); if ($tgl_leng==1) $i="0".$tgl; else $i=$tgl; echo "<option value=$i>$i</option>";} echo "</select>"; copyright by : japikinfo.com 2017 Bulan //array yang digunakan pada ComboBox bulan $bln=array(1=>"Januari","Februari","Maret","April","Mei", "Juni","July","Agustus","September","Oktober", "November","Desember"); //membuat bulan ComboBox echo "<select name=bulan> <option value=Januari selected>Januari</option>"; for($bulan=2; $bulan<=12; $bulan++){ echo "<option value=$bulan>$bln[$bulan]</option>";} echo "</select>"; copyright by : japikinfo.com 2017 Tahun //Membuat tahun 1900 sampai sekarang pada ComboBox $now=date("Y"); echo "<select name=tahun> <option value=1900 selected>1900</option>"; for($thn=1901; $thn<=$now; $thn++){ echo "<option value=$thn>$thn</option>";} echo "</select>" ?> copyright by : japikinfo.com 2017 Simpan Agenda <?php include "../config/koneksi.php"; //variabel form $judul=$_POST['judul']; $tanggal=$_POST['tanggal']; $bulan=$_POST['bulan']; $tahun=$_POST['tahun']; $tempat=$_POST['tempat']; $keterangan=$_POST['keterangan']; $jadwal="$tanggal-$bulan-$tahun"; copyright by : japikinfo.com 2017 $simpan="Insert into tbagenda Values('','$judul','$jadwal','$tempat','$keterangan') "; if(mysql_query($simpan)){ echo "<script>window.alert('Agenda Berhasil Disimpan'); window.location=('index.php?page=tampilagenda' )</script>"; } else { echo "Data agenda Gagal disimpan <a href='?page=inputagenda' rel="nofollow">Back</a>"; } ?> copyright by : japikinfo.com 2017 Tabel Gallery   Buat nama tabel dengan nama tbgallery Isikan field untuk tabel gallery     Idgallery Foto Deskripsi int varchar text 5 100 Klik Simpan / save copyright by : japikinfo.com 2017 auto_incremen Input Gallery foto deskripsi Action=“submit” Action=“reset” onClick="self.history.back()" copyright by : japikinfo.com 2017 Simpan gallery <?php include "../config/koneksi.php"; //variabel form $deskripsi=$_POST['deskripsi']; //simpan gambar $lokasi_file = $_FILES['gambar']['tmp_name']; $nama_file = $_FILES['gambar']['name']; $ukuran_file = $_FILES['gambar']['size']; $direktori = "../foto_gallery/$nama_file"; move_uploaded_file($lokasi_file,"$direktori"); copyright by : japikinfo.com 2017 $simpan="Insert into tbgallery Values('','$direktori','$deskripsi')"; if(mysql_query($simpan)){ echo "<script>window.alert('Gallery Berhasil Disimpan'); window.location=('index.php?page=tampilgallery')</script>"; } else { echo "Data Gallery Gagal disimpan <a href='?page=inputgallery' rel="nofollow">Back</a>"; } ?> copyright by : japikinfo.com 2017 Input Download   Buat nama tabel dengan nama tbdownload Isikan field untuk tabel download     Iddownload judul file int varchar varchar 5 100 100 Klik Simpan / save copyright by : japikinfo.com 2017 auto_incremen Simpan Download <?php include "../config/koneksi.php"; $nama=$_POST['nama']; $lokasi_file = $_FILES['file']['tmp_name']; $nama_file = $_FILES['file']['name']; $ukuran_file = $_FILES['file']['size']; $direktori = "../file/$nama_file"; move_uploaded_file($lokasi_file,"$direktori"); $simpan="Insert into tbdownload Values('','$nama','$direktori')"; if(mysql_query($simpan)){ copyright by : japikinfo.com 2017 Simpan Download echo "<script>window.alert('File Download Berhasil Disimpan'); window.location=('index.php?page=tampildownload')< /script>"; } else { echo "Data Download Gagal disimpan <a href='?page=inputdownload' rel="nofollow">Back</a>"; } ?> copyright by : japikinfo.com 2017 Baner Iklan   Buat nama tabel dengan nama tbiklan Isikan field untuk tabel iklan     Idiklan keterangan gambar int varchar varchar 5 100 100 Klik Simpan / save copyright powered by by :: japikinfo.com japikinfo.com 2016 2017 auto_incremen Tempatkan Banner pada Navigasi copyright by : japikinfo.com 2017 Upload Video   Buat nama tabel dengan nama tbvideo Isikan field untuk tabel video       Idvideo Judul_video Link_youtube Deskripsi Gambar int varchar varchar text varchar 5 100 100 100 Klik Simpan / save copyright by : japikinfo.com 2017 auto_incremen Rancangan Upload Video copyright by : japikinfo.com 2017 Simpan Vidio <?php include "../config/koneksi.php"; //variabel form $deskripsi=$_POST['deskripsi']; $judul=$_POST['judul']; $link= substr($_POST['link'],31,11); //simpan gambar $lokasi_file = $_FILES['gambar']['tmp_name']; $nama_file = $_FILES['gambar']['name']; $ukuran_file = $_FILES['gambar']['size']; copyright by : japikinfo.com 2017 $direktori = "../foto_video/$nama_file"; move_uploaded_file($lokasi_file,"$direktori"); $simpan="Insert into tbvideo Values('','$judul','$link','$deskripsi','$direktori')"; if(mysql_query($simpan)){ echo "<script>window.alert('video Berhasil Disimpan'); window.location=('index.php?page=tampilvideo')</script>"; } else { echo "Data video Gagal disimpan <a href='?page=inputvideo' rel="nofollow">Back</a>"; } ?> copyright by : japikinfo.com 2017 Tampilan Video copyright by : japikinfo.com 2017 Scrip Tampilan Video <?php // Tampilkan 2 video terbaru include "config/koneksi.php"; $queryvideo = "SELECT * FROM tbvideo ORDER BY idvideo DESC LIMIT 2"; $hasilvideo = mysql_query($queryvideo); while ($v=mysql_fetch_array($hasilvideo)) { echo "<iframe src=\"http://www.youtube.com/embed/$v[link_youtube]\" frameborder=\"0\" width=\"270\" height=\"200\"></iframe> "; } ?> copyright by : japikinfo.com 2017 Logout <?php session_start(); session_destroy(); echo "<center><h2>Berhasil Logout <a href='../login.php' rel="nofollow">Back</a>"; ?> copyright by : japikinfo.com 2017 Konsep Website copyright by : japikinfo.com 2017 Halaman Utama (Index.php) copyright by : japikinfo.com 2017 Desain Halaman Utama Style.css body { margin:0; } .pembungkus { width:800px; padding:5px; border:1px solid #999; margin:5px auto; -moz-box-shadow: 0 0 2em #000; -webkit-box-shadow: 0 0 2em #000; box-shadow: 0 0 1em #000; -webkit-border-radius:10px; -moz-border-radius:10px; } .header { height:150px; background-image: url(images/kepala.jpg); } copyright by : japikinfo.com 2017 .menu { height:25px; background-image:url(images/nav.jpg); font:Arial, Helvetica, sans-serif; font-size:14px; } .navigasi { float:left; width:210px; background-color:#999; min-height:300px; } .kontent { margin-left:200px; background-color:#EEE; min-height:300px; } .footer { clear:both; height:30px; background-color:#CCC; } copyright by : japikinfo.com 2017 dashboard.php (front page) <head> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div class=“pembungkus"> <div class="header"> header </div> <div class="menu"> menu </div> copyright by : japikinfo.com 2017 <div class="navigasi"> navigasi </div> <div class="konten"> isi </div> <div class="footer"> kaki </div> </div> </body> </html> copyright by : japikinfo.com 2017 Tampilan Halaman Depan copyright by : japikinfo.com 2017 Menu horizontal .hori li { float: left; list-style: none; font-family: Verdana, Arial, Helvetica, sans-serif; } .hori li a { color:#0000EE; text-decoration: none; font-variant: small-caps; font-size:14px; border: 0px solid black; padding: 10px 15px; -webkit-transition:all 1s ease-out; -moz-transition:all 1s ease-out; -ms-transition:all 1s ease-out; -o-transition:all 1s ease-out; transition:all 1s ease-out; copyright by : japikinfo.com 2017 } .hori a:hover { text-decoration: none; background:#fff; color: #000; font-size:16px; } copyright by : japikinfo.com 2017 Penempatan Pada Dashboard Letakkan dibawah class menu <div class="menu"> <div class="hori"> <li><a href="#" rel="nofollow">Home</a></li> <li><a href="#" rel="nofollow">Profil</a></li> <li><a href="#" rel="nofollow">Gallery</a></li> <li><a href="#" rel="nofollow">Agenda</a></li> <li><a href="#" rel="nofollow">Download</a></li> <li><a href="#" rel="nofollow">Hubungi Kami</a></li> </div> copyright by : japikinfo.com 2017 Menu Vertikal .menuv { width: 200px; margin: 5px; } .menuv ul { list-style: none; margin: 0; padding: 0; } .menuv img { border: none; } copyright by : japikinfo.com 2017 Menu Vertikal .menuv li a:link, #menuv li a:visited { color: #333; display: block; height:25px; padding: 8px 0 0 10px; background-color: #FFCC66; background-image: none; } .menuv li a:hover, #menuv li #current { color: #FFF; background-color: #FF33CC; background-position: 0 -32px; padding: 8px 0 0 10px; font-size:20px; copyright by : japikinfo.com 2017 } Index.php <?php header("location: dashboard.php?page=main"); ?> copyright by : japikinfo.com 2017 Isifile.php (front page) <?php if (isset($_GET['page'])){ $page = $_GET['page']; if ($page == 'main'){ include('main.php'); } elseif ($page == 'profil'){ include('profil.php'); } } else { header('location: index.php'); } ?> copyright by : japikinfo.com 2017 Main.php copyright by : japikinfo.com 2017 Memanggil tbberita <?php include "config/koneksi.php"; $sqlTampil = "SELECT * FROM tberita ORDER BY idberita asc"; $qryTampil = mysql_query($sqlTampil) or die ("Gagal query".mysql_error()); //error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); while($dataTampil=mysql_fetch_array($qryTampil)) { ?> copyright by : japikinfo.com 2017 Halaman Home copyright by : japikinfo.com 2017 Tampil Judul, gambar & isi berita <?php echo "<div class='images'> <img src='foto_berita/$dataTampil[gambar]' border='0' height='110'></a></div> $dataTampil[isi]"; ?> copyright by : japikinfo.com 2017 Tambahkan css images pada style.css .images { float: left; padding-top: 20px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; margin-left: 0px; } copyright by : japikinfo.com 2017 elements   www.animationfactory.com www.japikinfo.com Jangan pernah menyerah atas usaha yang telah engkau kerjakan. Teruslah berjuang hingga dapat. copyright by : japikinfo.com 2017 Membuat Read More.. Lakukan pemotongan isi berita agar hanya beberapa karakter yang ditampilkan dengan cara sebagai berikut $isi_berita=$dataTampil['isi']; $isi = substr($isi_berita,0,500); echo "<div class='images'><img src='foto_berita/$dataTampil[gambar]' border='0' height='110'></a></div>$isi"; ?><a href="?page=beritalengkap&idberita=<?=$dataTampil['idberita'];? rel="nofollow"> ">Read More....</a> copyright by : japikinfo.com 2017 Rancangan BeritaLengkap copyright by : japikinfo.com 2017 View Kode BeritaLengkap <?php include "config/koneksi.php"; $idBerita = $_GET['idberita']; $sqlTampil = "SELECT * FROM tberita WHERE idberita='$idBerita'"; $qryTampil = mysql_query($sqlTampil) or die ("Gagal query".mysql_error()); $dataTampil=mysql_fetch_array($qryTampil); ?> copyright by : japikinfo.com 2017 Rancangan Agenda Tampil agenda pada halaman home copyright by : japikinfo.com 2017 Hasil Tampilan Agenda copyright by : japikinfo.com 2017 Halaman Polling copyright by : japikinfo.com 2017 Tampil Polling Pertanyaan Jawab1 Jawab2 Jawab3 Jawab4 form action="?page=pollingPilih <a href="?page=pollinghasil&?idpolling=<?php echo $hslTampil['idpolling']; ? rel="nofollow"> Lakukan proses pemanggilan polling pada halaman home (dashboard.php) copyright by : japikinfo.com 2017 View Code Polling <body> <?php include "config/koneksi.php"; error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); $sqlTampil = "SELECT * FROM tbpolling WHERE statusaktif='Y' LIMIT 1"; $qryTampil = mysql_query($sqlTampil) or die ("Query database gagal: ".mysql_error()); $hslTampil = mysql_fetch_array($qryTampil); $total = $hslTampil['hasil1'] + $hslTampil['hasil2'] + $hslTampil['hasil3'] + $hslTampil['hasil4']; ?> • Tampilkan textfield untuk idpolling dan buat type=hidden • <input name="idpolling" type="hidden" value="<?php echo $hslTampil['idpolling']; ?>"> • Tampilkan data tiap masing2 jawaban copyright by : japikinfo.com 2017 PollingPilih <?php include "config/koneksi.php"; $idpolling $rbPilihan =$_POST['idpolling']; =$_POST['rbPilihan']; $sqlPolling ="SELECT * FROM tbpolling WHERE idpolling='$idpolling'"; $qryPolling =mysql_query($sqlPolling) or die ("Gagal query: ".mysql_error()); $hslPolling =mysql_fetch_array($qryPolling); switch ($rbPilihan){ copyright by : japikinfo.com 2017 } case 'a': $hasil =$hslPolling['hasil1']+1; $sqlEdit="hasil1=$hasil"; break; case 'b': $hasil =$hslPolling['hasil2']+1; $sqlEdit="hasil2=$hasil"; break; case 'c': $hasil =$hslPolling['hasil3']+1; $sqlEdit="hasil3=$hasil"; break; case 'd': $hasil =$hslPolling['hasil4']+1; $sqlEdit="hasil4=$hasil"; break; copyright by : japikinfo.com 2017 # Update nilai hasil $sqlUbah ="UPDATE tbpolling SET ".$sqlEdit." WHERE idpolling='$idpolling'"; mysql_query($sqlUbah) or die ("Query Edit gagal: ".mysql_error()); # Redireksi echo "<meta http-equiv='refresh' content='0; url=?page=pollinghasil&?idpolling=$idpolling'>"; ?> copyright by : japikinfo.com 2017 Polling Hasil copyright by : japikinfo.com 2017 View Code Polling Hasil <?php include "config/koneksi.php"; error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); $id = $_GET['idpolling']; $sqlTampil statusaktif='Y'"; $qryTampil ".mysql_error()); $hslTampil = "SELECT * FROM tbpolling WHERE = mysql_query($sqlTampil) or die ("Query gagal: = mysql_fetch_array($qryTampil); copyright by : japikinfo.com 2017 $nilai1 = $hslTampil['hasil1']; $nilai2 = $hslTampil['hasil2']; $nilai3 = $hslTampil['hasil3']; $nilai4 = $hslTampil['hasil4']; $jumlah =$nilai1 + $nilai2 + $nilai3 + $nilai4; if (($jumlah==0)){ $hasil1=0; $hasil2=0; $hasil3=0; $hasil4=0; } else{ $hasil1=round(($nilai1/$jumlah)*100,2); $hasil2=round(($nilai2/$jumlah)*100,2); $hasil3=round(($nilai3/$jumlah)*100,2); $hasil4=round(($nilai4/$jumlah)*100,2); } ?> copyright by : japikinfo.com 2017 Tampilkan Untuk Masing2 Baris <tr> <td><?php echo $hslTampil['pertanyaan']; ?></td> </tr> <tr> <td><img src="images/balok1.gif" width="<?php echo "$hasil1"; ?>" height="15"> <?php echo $hasil1."%"; ?> <?php echo $hslTampil['jawab1']; ?> </td> </tr> <tr> copyright by : japikinfo.com 2017 View code hasil polling copyright by : japikinfo.com 2017 Hasil Polling copyright by : japikinfo.com 2017 Design Gallery copyright by : japikinfo.com 2017 Gallery <?php include "config/koneksi.php"; error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); $query = "SELECT * FROM tbgallery"; $tampil = mysql_query($query); // Tentukan banyaknya kolom horizontal $kolom = 3; echo "<center><table><tr>"; $i = 0; while ($r = mysql_fetch_array($tampil)){ // Tampilkan data ke kolom kanan selama copyright by : japikinfo.com 2017 $i >= kolom if ($i >= $kolom){ echo "</tr><tr>"; $i = 0; } $i++; echo "<td align='center'> <a href='#' rel="nofollow"><img src='foto_gallery/$r[foto]' border='0' width='180' height='180'> $r[deskripsi]</a> </td>"; } echo "</tr></table>"; ?> copyright by : japikinfo.com 2017 Hasil Tampilan Gallery copyright by : japikinfo.com 2017 Styles.css gambar img { border: none; } img#gambar { margin-top: 0; margin-right: 10px; margin-bottom: 10; margin-left: 0; padding: 0px; background: #fff;-moz-box-shadow: 0px 0px 5px #bfbfbf;-webkit-box-shadow: 0px 0px 5px #bfbfbf; } Id img diganti seperti dibawah ini <img id=\"gambar\" src='foto_gallery/$r[foto]' copyright by : japikinfo.com 2017 Desain Download copyright by : japikinfo.com 2017 Download.php <?php include "config/koneksi.php"; $query = "SELECT * FROM tbdownload ORDER BY iddownload DESC"; $hasil = mysql_query($query); while ($r = mysql_fetch_array($hasil)){ echo "Nama File : $r[judul] "; echo "<a href='file/$r[file]' rel="nofollow">Download File</a><hr size='1' color='orange'> "; } ?> copyright by : japikinfo.com 2017 Tampilan Download copyright by : japikinfo.com 2017 Halaman Website copyright by : japikinfo.com 2017 Pembuatan Slide Show Slide show pada sebuah website digunakan untuk menampilkan headline berita dalam bentuk tampilan berganti. Seperti dalam contoh website : Detik.com Kompas.com Vivanews.com Republika.co.id Okezone.com copyright by : japikinfo.com 2017 Plugin Slide Show Plugin yang digunakan untuk slide show yaitu dengan menggunakan Slide.js dan Headline.js Plugin ini banyak ditemukan di internet bahkan banyak plugin2 yang menyediakan slide show. Untuk tampilanya menggunakan head.css yang dapat di modifikasi sesuai kebutuhan. copyright by : japikinfo.com 2017 Contoh Headline News Slide copyright by : japikinfo.com 2017 Head.css #divTrigger a:link,#divTrigger a:visited{ text-decoration: none; /* hilangkan garis bawah pada link */ margin:4px 0px; /* memberi jarak antar link */ padding: 1px 4px; /* menjadikan link seperti kotak */ border: 1px solid #000; background-color: #FFF; color: #000; } /* link yang dilalui oleh mouse dan element dengan class='selected' akan mempunyai efek yang sama */ #divTrigger a:hover,#divTrigger a:active,.selected{ background-color: #00A; color: #FFF; copyright by : japikinfo.com 2017 } #divContent{ margin-top:4px; border:1px solid #000; width: 550px; height: 150px; padding: 4px; } #divContent div{ /* semua div di dalam element dengan id='divContent' akan di sembunyikan sementara */ display:none } .title{ font-size: 16px; font-weight: bold; color: #006; text-decoration: underline; margin-bottom: 2px; display:block } copyright by : japikinfo.com 2017 Kode Slide Show <html> <head> <link rel="stylesheet" type="text/css" href="head.css"> <script language="javascript" src=“slide.js"></script> <script language="javascript" src="headline.js"></script> <script type="text/javascript"> $(document).ready(function(){ // untuk permulaan, tampilkan content nomor 1 '#slideAwal' bukaContent($('#slideAwal'),'div1'); }); </script> copyright by : japikinfo.com 2017 Menampilkan Gambar Slide </head> <body> <div id="divTrigger"> <a href="javascript:;" id="slideAwal" rel="nofollow">1</a> <a href="javascript:;" <a href="javascript:;" <a href="javascript:;" </div rel="nofollow"> onClick="bukaContent(this,'div1')" onClick="bukaContent(this,'div2')">2</a> onClick="bukaContent(this,'div3')">3</a> onClick="bukaContent(this,'div4')">4</a> <div id="divContent"> <div id="div1"> Spy Next Door <img src="images/spy.jpg" align="left" /> Bob Ho (Jackie Chan), seorang ahli mata-mata CIA memutuskan menyudahi karirnya untuk menata hidupnya bersama tetangga sekaligus kekasihnya, Gillian (Amber Valletta)... </div> copyright by : japikinfo.com 2017 <div id="div2"> Confucius <img src="images/confucius.jpg" align="left" /> Isikan Teksk Lainya... </div> <div id="div3"> Ketika Cinta Bertasbih <img src="images/kcb.jpg" align="left" /> Isikan Teksk Lainya... </div> <div id="div4"> My Name is Khan <img src="images/khan.jpg" align="left" /> Isikan Teksk Lainya... </div> </div> </body> </html> copyright by : japikinfo.com 2017 Penerapan Pada database <div id="divContent"> <?php include "config/koneksi.php"; // Tampilkan 4 headline berita terkini error_reporting(E_ALL ^ (E_NOTICE | E_WARNING)); $sql = mysql_query("SELECT * FROM tberita ORDER BY idberita DESC LIMIT 4"); $no=1; while($r=mysql_fetch_array($sql)){ echo "<div id='div$no'> $r[judul] <img src='images/$r[gambar]' align='left' width='200' height='130'>$r[isi] </div>"; $no++; } copyright by : japikinfo.com 2017 ?> Tampilan Rancangan Website copyright by : japikinfo.com 2017 </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/dasar-dasar-world-wide-web-website-o-le-h-a-ri-ri-k-japi-k-s" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "DASAR-DASAR WORLD WIDE WEB (WEBSITE) O LE H : A RI RI K JAPI K, S. KOM"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;">

DASAR-DASAR WORLD WIDE WEB (WEBSITE) O LE H : A RI RI K JAPI K, S. KOM

Recommend Documents

dan

Ini Heading 1

Ini Heading 2

Ini Heading 3

Ini Heading 4

Ini Heading 5

Ini Heading 6

table headers

vertical headers

Cell that spans two colomns

Cell that spans two rows