1. cara menggunakan style css
sebelum kita mempelajari style css saya akan menjelaskan apa itu style css CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).
Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke CSS3.
CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode CSS.
Berikut langkah-langkah membuat CSS pada HTML, pertama ketikkan tag seperti di bawah ini:
pertama buat dulu htmlnya :
<html>
<title>Buat Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
<body>
<header>
<h1>Buat Website</h1>
</header>
<menu>
<a href="index.html">Home</a>
<a href="profil.html">Profil</a>
<a href="#">Produk</a>
<a href="#">Kontak</a>
</menu>
<article>
<h1>Judul Artikel</h1>
<img src="images/2.jpg">
<p>Pengertian internet (interconnection
networking) sendiri adalah jaringan komunikasi
global yang terbuka dan menghubungkan jutaan
bahkan milyaran jaringan komputer dengan
berbagai tipe dan jenis, dengan menggunakan
tipe komunikasi seperti telepon, satelit dan
lain sebagainya.</p>
<p>Pengertian internet (interconnection
networking) sendiri adalah jaringan komunikasi
global yang terbuka dan menghubungkan jutaan
bahkan milyaran jaringan komputer dengan
berbagai tipe dan jenis, dengan menggunakan
tipe komunikasi seperti telepon, satelit dan
lain sebagainya.</p>
</article>
<footer>
<p>Marssal Febrianto © 2016</p>
</footer>
</body>
</html>
contohnya seperti dibawah ini :
setelah itu disimpan untuk cara menyimpannya seperti biasa namanya teman teman bisa tulis sesuka teman teman tapi extensisnya dalam bentuk html
dan hasil Outputnya akan terlihat seperti di bawah ini :
CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode CSS.
Berikut langkah-langkah membuat CSS pada HTML, pertama ketikkan tag seperti di bawah ini:
pertama buat dulu htmlnya :
<html>
<title>Buat Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
<body>
<header>
<h1>Buat Website</h1>
</header>
<menu>
<a href="index.html">Home</a>
<a href="profil.html">Profil</a>
<a href="#">Produk</a>
<a href="#">Kontak</a>
</menu>
<article>
<h1>Judul Artikel</h1>
<img src="images/2.jpg">
<p>Pengertian internet (interconnection
networking) sendiri adalah jaringan komunikasi
global yang terbuka dan menghubungkan jutaan
bahkan milyaran jaringan komputer dengan
berbagai tipe dan jenis, dengan menggunakan
tipe komunikasi seperti telepon, satelit dan
lain sebagainya.</p>
<p>Pengertian internet (interconnection
networking) sendiri adalah jaringan komunikasi
global yang terbuka dan menghubungkan jutaan
bahkan milyaran jaringan komputer dengan
berbagai tipe dan jenis, dengan menggunakan
tipe komunikasi seperti telepon, satelit dan
lain sebagainya.</p>
</article>
<footer>
<p>Marssal Febrianto © 2016</p>
</footer>
</body>
</html>
contohnya seperti dibawah ini :
Untuk CSS nya ikut seperti dibawah ini :
{padding: 0; margin: 0;}
body{background: #27ae60}
header{background: #3498db; width: 800px; margin: auto; padding: 25px; color: yellow;}
menu{background: #2c3e50; width: 800px; margin: auto; padding: 25px;}
menu a{color: white; text-decoration: none; margin: 0 20px 0 0;}
menu a:hover{text-decoration: underline}
article{background: #95a5a6; width: 800px; margin: auto; padding: 25px;}
article img{float: left; margin: 10px 10px 10px 0;}
article p{line-height: 20px; margin: 0 0 10px 0;}
footer{background: #2c3e50; width: 800px; margin: auto; padding: 25px;}
footer p{color: white;}
contohnya seperti dibawah ini :
lalu simpan dengan cara klik menu File, lalu klik save
simpan didalam folder yang sama dengan file HTML yang tadi , dan Di sini saya menyimpan dengan nama style.css. Setelah itu klik Save untuk menyimpan.
oh ya nama filenya terserah teman-teman tapi extensisnya harus CSS
2. Menampilkan Data dari Database ke Halaman Web Menggunakan PHP MySQL
PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994. Pada awalnya PHP adalah sinngkatan dari "Personal Home Page Tools". Selanjutnya diganti menjadi FI ("Forms Interpreter"). Sejak versi 3.0, nama bahasa ini diubah menjadi "PHP: Hypertext Prepocessor" dengan singkatannya "PHP". PHP versi terbaru adalah versi ke-5. Berdasarkan survey Netcraft pada bulan Desember 1999, lebih dari sejuta site menggunakan PHP, di antaranya adalah NASA, Mitsubishi, dan RedHat.
Berikut langkah-langkah menampilkan data dari database ke halaman web menggunakan PHP MySQL.
Pertama download dahulu aplikasi xampp:
xampp-win32-1.7.2
xampp-win32-5.5.35-0-VC11-installer
Atau ke situs resminya Xampp untuk mendownload aplikasi Xampp jika tidak kompatibel dengan PC anda.
Setelah didownload dan diinstal buka xampp lalu klik tombol Start pada Apache dan MySQL. Jika sudah di-start tampilannya akan seperti di bawah ini. Lalu minimize aplikasi xampp.
Buka browser, lalu ketikkan localhost/phpmyadmin pada address bar. Tekan Enter.
Klik Databases. Lalu pada Create database isi nama database yang ingin kita buat tapi jangan dispasi agar tidak terjadi kesalahan pemanggilan nama database pada saat membuat script php (di sini saya menggunakan tanda underscore _ ). Lalu klik Create.
Pada Create table di bagian Name isikan nama tabel di sini saya membuat tabel mahasiswa, dan pada Number of Columns saya isikan dua (2). Klik Go.
Pada tabel mahasiswa kita buat npm dan nama.
Type INT adalah untuk data yang akan diinput berupa bilangan bulat.
Type VARCHAR adalah untuk data yang akan diinput berupa karakter (berupa huruf).
Pada Length/Values adalah untuk jumlah batasan karakter yang akan diinput.
Untuk npm pada Index-nya dibuat menjadi PRIMARY karena npm merupakan karakter unik (berbeda) dengan data yang lain.
Pada npm A_I (Auto Increment) dicentang. Gunanya untuk mengurutkan data yang akan dimaksudkan (npm yang diinput akan berurutan nantinya).
Tampilannya seperti contoh di bawah. Jika sudah klik Save.
Sekarang kita akan memasukkan data-data ke field pada tabel yang telah kita buat tadi. Klik pada tabel mahasiswa yang ada pada kiri layar. Lalu klik Insert.
Contohnya pada npm di bagian value isikan 201455027. Dan pada nama isikan Marssal Febrianto. Jika sudah klik Go.
Masukkan lagi data-data pada tabel mahasiswa sesuai dengan keinginan lalu klik mahasiswa lagi . Contohnya jika sudah tampilannya akan seperti di bawah ini
Lalu kita akan membuat script php yang akan menampilkan data yang kita buat di tabel mahasiswa tadi di browser. Pertama buka folder tempat di mana xampp diinstal di sini saya install-nya default. Buka My Computer, buka Local Disk (C:) lalu buka folder xampp, buka htdocs. Kemudian buat folder baru.sesuai nama folder teman-teman dengan database yang teman-teman punya
Buka aplikasi Sublime Text. Lalu ketikkan script seperti di bawah ini.
<?php
<?php
$hostname = "localhost";
$username = "root";
$password = "";
$db ="database_ti2";
$koneksi = mysql_connect($hostname, $username, $password) or die (mysql_error());
mysql_select_db($db, $koneksi) or die(mysql_error());
$mahasiswa = mysql_query("SELECT * FROM mahasiswa", $koneksi) or die(mysql_error());
?>
<html>
<head>
<title>Database TI</title>
</head>
<body>
<h2>Data TI</h2>
<?php
while ($row=mysql_fetch_array($mahasiswa)) {
echo 'npm: '.$row['npm'].'<br>';
echo 'Nama: '.$row['nama'].'<br>';
echo '<hr>';
}
?>
</body>
</html>
contohnya seperti dibawah ini :
oh ya jika teman teman ingin membuat database yang lain ,teman teman harus mengganti nama mahasiswa dengan mana database sesuai dengan database milik teman sekalian
oh ya dan jangan lupa dibagian ini juga harus sesuai dengan database milik teman sekalian kuberi warna yang berbeda biar teman teman tau ya
echo 'npm: '.$row['npm'].'<br>';
echo 'Nama: '.$row['nama'].'<br>';
echo '<hr>';
dan ini hasil output data mahasiswa yang kita buat tadi :
Oke teman pembelajaran menggunakan style CSS dan menampilkan database dengan menggunakan PHP MySQL dari saya mohon maaf bila ada kesalahan . bila teman teman ada yang ingin menambahkan atau melengkapi kekurangan saya dari pembelajaran diatas silahkan berkomentar agar kita saling mendapatkan ilmu dan bisa maju bersama sama.
SEE YOU AGAIN !!!!!!!!