Minggu, 14 Agustus 2016

menggunakan style CSS dan menampilkan data dari database dengan menggunakan PHP MySQL

oke teman-teman sekarang kita akan belajar dengan menggunakan style dengan css dan menampilkan database dengan menggunakan PHP MySQ

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 &copy; 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

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

dan hasil Outputnya akan terlihat seperti di bawah ini :



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 !!!!!!!!

Senin, 08 Agustus 2016

Membuat Text Area dan Frame

Hello guys  sekarang kita akan belajar bagaimana membuat text area dan freme ok kita langsung saja bagaimana cara membuat text area hmmmmmmm !!!!!! bagaimana ya oke kita langsung aja

untuk membuat TEXT AREA
   pertama saya akan menjelaskan dulu pada dasarnya text area sama dengan input type text namun lebih besar dan dapat berisi banyak baris.banyaknya baris diatur melalui atribut rows dan cols, atau memlalui CSS.
contoh :
<textarea rows="5" cols="20">
Text yang diisi dapat mencapai banyak baris
</textarea>

okey kita mulai saja percobaannya, untuk awalan kita buat seperti ini :
seperti biasa kita akan membuat kepala html dulu

<html>
<body>
<h1>contoh Text area </h1>

setelah itu kita membuat isi dari html

Alamat Lengkap :<br>
<textarea name ="textarea" id="textarea" cols="45"
rows="5"></textarea>

dan terakhir sebagai penutup

</body>
</html>
setelah itu disimpan sesuai dengan kehendak kalian dengan exstensi .HTML setelah itu seperti biasa klik save
contohnya seperti  dibawah ini

dan outputnya akan tampil seperti ini

jadi deh text areanya dan kalian pun bisa mengisi di dalam kotak kosong tersebut
udah dulu ya sampai jumpa di hari lain......
eeeee.... kelupaan masih ada satu ya yang belum kita coba yaitu cara membuat frame
okey sekarang kita akan membuat frame, bagaimana cara membuat frame ada yang sudah tau. kalau ada yang yang belum tau mari kita belajar bagaimana cara membuat frame

CARA MEMBUAT FRAME 
frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi dengan sebuah halaman web yang sesuai.

frame dapat digunakan untuk berbagai macam keperluan ,seperti :

  1. membuat daftar isi dengan sisi yang lainnya sebagai isinya
  2. membuat sebuah logo yang tidak berubah ubah dengan sisi yang lainnya sebagai isi
hmmm sepertinya pada akhir dari dua keperluan yang diatas menyimpulkan satu tujuan yang sama yaitu kedua sisi saling melengkapi dengan sisi yang satu sebagai judul dan sisi yang lainnya sebagai isi,tapi itu terserah teman teman semua karna kalian memiliki imajinasi sendiri untuk membuat kedua sisi tersebut menjadi apa hihihihi.....

oke kita langsung aja eeee salah maksudnya saja untuk membuat frame
ketiklah tag seperti dibawah ini :

<html>
<frameset rows=100,*>

ohh ya saya lupa memberitahu bahwa tampilan frame hanya bisa ditampilkan bila browser teman-teman  mendukung frame
kita lanjut ya

<frame src="contoh textarea.html">
<frame src="marssal.html">

yang diisi didalam <frame src=""> adalah untuk menampilkan web yang mau ditampilkan 

</frameset>
</html>

dan tampilan htmlnya akan seperti ini :


untuk Outpunya akan terlihat seperti ini :


dan begitulah cara membuat frame dan text area dengan baik. Cukup segini saja perkenalan kita dengan frame dan text area dan kita akan bertemu dilain waktu ya teman teman jika ada kesalahan mohon maaf yang sebesar besarnya dan silahkan komentarin agar kita dapat belajar bersama dan saling berbagai ilmu. bye.... bye..... 

See You Again !!!!! 




Rabu, 01 Juni 2016

metode get dan pembuatan form data mahasiswa

        oke gays kalian bertemu lagi dengan saya , sekarng saya akan memberitahukan cara membuat html dengan menggunakan metode get.
       pertama tama saya akan menjelaskan pengertian metode get. Metode get adalah metode pengiriman gambar dengan menggunakan query string.

pada metode get :
  • Variabel terlihat pada URL. Data pada setiap variabel dipisahkan dengan &. Contohnya seperti HTTP://URL/PAGE.PHP?GET1NILAI2&GET2=NILAI2
  • stringnya di batasi hanya bisa menggunakan 2047 charakter
  • memungkinkan pengunjung langsung memasukkan nilai variabel pada form prosses
Contoh penggunaan Metode get
       <form action="http://www.google.com" method="get"> adalah untuk membuat link agar terhubung ke google 
<table................dst hingga sampai di </tr>bagian akhir> untuk membuat table
< input> input untuk menginput  data kita

Hasil Output 


sekarang kita akan membuat form data mahasiswa . kita langsung saja  berikut saya akan meberikan contoh source code

Contoh membuat nama dan Alamat


bgcolor untuk membuat background warna pada background belakang
center  untuk membuat tulisan di tengah
h1 untuk headingnya
font color untuk warna tulisannya
face untuk bentuk tulisannya
size  untuk panjang nama yang akan di input

Hasil Outputnya


untuk lebih jelasnya untuk input nama dan alamat
terlihat seperti ini


Contoh membuat form
dengan checkbox


type adalah bentuk data yang akan di tampilkan 
Value(nilai) adalah Informasi yang ditentukan untuk atribut
name adalah nama data yang akan di inputkan

Hasil Outputnya


Contoh membuat form 
dengan radio


Hasil Outputnya


Contohuntuk membuat form 
dengan select


select adalah atribut untuk membuat pilihan
Option adalah isi yang akan di select 

Hasil Output

Contoh hasil dari keseluruhan untuk 
form data mahasiswa


contoh Output form data mahasiswa



 
 Oke teman pembelajaran untuk membuat GET dan Form data mahasiswa 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 !!!!!!!!!

Minggu, 08 Mei 2016

Membuat Link Dan Tabel Dari HTML

       Oke teman kali ini kita akan belajar bagaimanaca cara membuat link dan tebel lewat html dan juga kita akan mengenal atribut-atribut yang dimiliki tabel. pertama tama kita akan belajar bagaimana cara membuat link dengan html

Membuat Link Dengan HTML :
      sebelumnya saya akan menjelaskan sedikit tentang link. link (hyperlink) adalah sebuah acuan dalam dokumen hiperteks(hypertext) ke dokumen lain atau sumber lain.untuk mengenali sebuah link di web biasanya cursor anak panah akan berganti ke cursor bentuk tangan dan tulisan yang memiliki link bisanya memiliki waarna yang terang/berbeda tulisan lainnya.

ada beberapa macam link seperti :

1. INTERLINK
    Interlink (internal link) adalah tautan antar artikel dalam web atau blog, baik artikel lama maupn artikel baru. tujuan agar pengunjung mudah untuk mencari artikel di dalam suatu web atau blog yg dikunjungi

2. EXTERNAL LINK
    External link adalah tautan yang menghubungkan websate atau blog yang satu ke websate atau blog lainnya.

3. BROKEN LINK
    Broken link adalah sebuah tautan yang menghubungkan suatu websate ke websate atau juga url yang tidak tersedia seperti halaman yang biasa kita lihat saat lagi internet "not found"

untuk kode dasar dalam membuat link menggunakan tag <a href="url">text yang mau kita bisa klick</a>
<a> : adalah tag kode dasar dalam pembuatan link
<href> : adalah atribut yang digunakan untuk menghubungkan ke link yang lain

Gambar dalam membuat link dengan html


outputnya 

  
untuk link yang dapat di klick terlihat seperti dibawah :
  
sekarang kita akan belajar bagaimana cara membuat tabel di html seperti yang diatas saya akan menjelaskan dulu bagaimana pengertian tabel beserta atribut yang dimiliki tabel di html

Membuat Tabel Dengan HTML : 

     tabel merupakan cara untuk menampilkan sebuah informasi dalam bentuk kolom dan baris. untuk menampilkan data dalam bentuk table di html kita menggunakan <table><tr><td> 

Tag <table>
Tag <table> adalah pembuka untuk membuat sebuah tabel 

Tag <tr>
Tag <tr> atau table row fungsinya untuk membuat baris pada tabel

Tag <td>
Tag <td> atau tabel data fungsinya untuk menampilkan data pada setiap sel tabel, untuk umumnya table data <tr> ini digunakan untuk membuat kolom dalam baris table

Contoh membuat tabel di HTML


border adalah salah satu dari atribut yang dimiliki tabel gunanya border adalah untuk mendefinisikan ukuran garis tepi dalam bentuk satuan pixels 

hasil output tabel dengan menggunakan <table border="1"> seperti yang diatas

beberapa atribut lainnya yang dimiliki tabel :

1. Cellspacing digunakan untuk membuat spasi antara dua cells dalam satuan pixels

contoh cellspacing dengan menggunkan atribut border

outputnya



 2. Cellpadding digunkan untuk mendefinisikan spasi

contoh cellpadding dengan menggunakan atribut border dan cellspacing


outputnya


3. width digunakan untuk mendefinisikan ukuran tabel dalam satuan pixels 

contoh width dengan menggunkan atribut border dan cellspacing


 output






4. Align digunakan untuk mendefinisikan perataan tabel yaitu perataan tengah, kiri atau kanan

Contoh Align dengan menggunakan atribut 
border, cellspacing,cellpadding, width

contoh diatas menggunakan align="center" (perataan tengah)

outputnya


5. bgcolor digunakan untuk mendefinisikan warna latar belakang

Conoh bgcolor dengan atribut
border,cellspacing,cellpadding,width,align


outputnya


      oh yah sering kali kita membuat tebel baris pertama kita gunakan sebagai judul kolom dari baris-baris di bawahnya. untuk keperluan ini html memiliki tag khusus yang bisa digunakan , yaitu tag <th> (tag head) dalam penggunaan tag <th> kita hanya perlu mengganti tag <td> dengan tag <th> pada baris pertama tabel.

Contoh Tag Header



Output


 Oke teman pembelajaran untuk membuat link dan tabel cukup 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 !!!!!!!!!