Latest Post

Showing posts with label Web Design. Show all posts

Sunday, August 6, 2017

Pernahkah Sobat pernah mendengar istilah Content Management System, yang bisa di singkat dengan ( CMS ) ? so pasti pernah jika anda suka membuat artikel di blog pribadi anda atau sebagainya, bagi sobat komputer yang sudah banyak berkecimpung di dunia web developer pastinya istilah ini sudah tidak asing lagi. Content Management System ( CMS ) merupakan sebuah aplikasi yang digunakan untuk memanagemen isi dari sebuah situs website. Aplikasi ini biasanya dibangun dengan menggunakan bahasa pemrograman berbasis web seperti PHP, ASP, HTML, CSS dan Java Script. Apabila kita ingin membuat website kita tak perlu pusing mempelajari bahasa pemograman web lebih lanjut, anda tinggal menggunakan CMS untuk membuat konten di Website.

Content Management System banyak sekali bertebaran di internet, mulai yang gratis atau pun yang berbayar, menawarkan banyak fitur-fitur sesuai kebutuhan agar lebih mudah untuk membangun website. Banyak Content Management System terkenal dan banyak untuk penggemar ngeblog, seperti Blogger, Wordpress, Joomla dan sebagainya. Nah pada artikel saya kali ini saya ingin memperkenalkan CMS Terbaik yang di buat oleh Anak Indonesia bisa sobat coba, dari pada berlama - lama mari kita ulas satu persatu.

5 CMS Terbaik Buatan Indonesia Gratis

1. CMS Sekolahku

CMS Sekolahku merupakan salah satu CMS yang terbaik buatan indonesia menurut saya, CMS Sekolahku merupakan Content Management System dan PPDB Online GRATIS yang dibuat untuk semua jenjang sekolah mulai dari tingkat SD/Sederajat, SMP/Sederajat, SMA/Sederajat, dan Perguruan Tinggi. Pengembangan CMS ini dimulai tahun 2012 yang awalnya merupakan project premium untuk salah satu sekolah di Kabupaten Kuningan, dan pada tahun 2013 mulai dibagikan secara gratis. Sedangkan untuk versi 2.x dimulai tahun 2016 dan masih aktif dimaintenance sampai sekarang. Apabila sobat ingin mencoba menggunakan CMS Sekolahku untuk membangun website, bisa sobat download CMS gratis di website resminya http://sekolahku.web.id.

2. PopojiCMS

CMS terbaik buatan Indonesia berikutnya ada Popoji CMS, PopojiCMS adalah Content Management System yang dibuat dengan konsep yang sangat menarik dan mudah untuk digunakan. PopojiCMS dibuat dengan tampilan responsive dengan base bootstrap dan selain itu juga dilengkapi dengan banyak plugin jQuery. CMS Popoji di luncurkan pada tanggal 07 Juni 2013 dengan dukungan dari pengembang yang sangat profesional membuat CMS Popoji cepat populer dikalangan web developer. Apabila sobat ingin mencoba menggunakan Popoji CMS untuk membangun website, bisa sobat download CMS gratis di website resminya http://www.popojicms.org/.

3. Fiyo CMS

CMS terbaik buatan Indonesia yang ketiga ada Fiyo CMS, Fiyo CMS adalah salah satu dari ratusan Content Management System yang ada di internet. Content Management System atau dalam bahasa Indonesia disebut Sistem Manajemen Konten (disingkat CMS), adalah software yang memungkinkan seseorang untuk menambahkan dan/atau memanipulasi (mengubah) isi dari suatu situs Web, Secara umum fitur dari Fiyo CMS sama seperti kebanyakan cms pada umumnya, yaitu dapat mengelola konten dengan sangat mudah. Tetapi Fiyo juga banyak memiliki keunggulan dibanding cms lainya. Apabila sobat akan mencoba menggunakan content management system buatan Indonesia yang satu ini, bisa sobat ke website resminya http://www.fiyo.org.

4. Lokomedia CMS

Lokomedia CMS merupakan CMS terbaik buatan Indonesia yang bisa sobat coba, design yang cukup menarik membuat CMS ini banyak diminati oleh web developer di Indonesia. Ada banyak sekali fitur yang mempermudah sobat untuk mengelola website yang akan sobat bangun. Untuk mencoba menggunakan CMS Lokomedia sobat bisa search di google disini.

5. HTMLy

Htmly merupakan CMS buatan Indonesia yang mengusung konsep CMS tanpa database atau dikenal dengan Flat-File. Design yang sangat simple dan juga elegan membuat banyak para bloger menggunakan CMS ini untuk mesin blog mereka. Selain itu karena tidak menggunakan database, CMS ini mempunyai loading yang sangat cepat sehingga sangat berpengaruh pada SEO blog yang kita bangun. Apabila sobat ingin mencoba menggunakan HTMLy untuk membuat blog, sobat bisa mendownload cms gratis tersebut disini.

Itulan ulasan mengenai beberapa CMS Buatan Indonesia, semoga ulasan diatas bisa bermanfaat untuk sobat komputer yang ingin membangun sebuah website atau blog, Semoga bermanfaat.

SOURCE :
- https://www.utopicomputers.com/download-cms-terbaik-buatan-indonesia-gratis/
- http://sekolahku.web.id
- http://www.popojicms.org/
- https://www.google.com/search?q=cms+indonesia+terbaik&client=ubuntu&hs=HPf&channel=fs&source=lnms&sa=X&ved=0ahUKEwj1-aLIg_bUAhXCLpQKHS9NBy8Q_AUICSgA&biw=1366&bih=591&dpr=1#channel=fs&q=lokomedia+cms
- https://www.htmly.com/

Saturday, May 13, 2017

Halo Sahabat CODEBARENG disini saya akan share bagaimana Cara Membuat Layout dengan HTML dan CSS sederhana, membuat Layout atau susunan kerangka Website ini salah satu unsur pembuatan web yang harus di perhatikan loh. Terutama jika temen-temen ingin bekerja di bagian Web designer.

Sekarang kita belajar untuk bagaimana cara membuat layout sederhana khususnya untuk bagi teman-teman yang sedang belajar HTML dan CSS, dan tidak menggunakan framework Bootstrap.

Pada Tampilan Kali ini sederhana saja ya. Artikel ini bertujuan untuk teman-teman yang baru belajar. Jadi tidak terlalu banyak script yang kita gunakan, sebagai contoh kita membuat Layout Blog :

Contoh Tampilan Jadi :

Langkah 1 :
Buatlah sebuah folder dan file bernama index.html
berikut isian kodingannya.

<html>
 <head>
  <title>Belajar Membuat Layout dengan HTML dan CSS</title>
  <link rel="stylesheet" href="custom.css"/>
 </head>
 <body>
  <div class="header">
   <div class="jarak">
    <h2>Belajar Membuat Layout dengan HTML dan CSS</h2>
   </div>
  </div>
  <div class="menu">
   <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
   </ul>
  </div>
  <div class="content">
   <div class="jarak">
    <!-- kiri -->
    <div class="kiri">
     <!-- blog -->
     <div class="border">
      <div class="jarak">
       <h3>Lorem Ipsum</h3>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, [...]</p>
       <button class="btn">Read More ..</button>
      </div>
     </div>
     <!-- end blog -->
     <!-- blog -->
     <div class="border">
      <div class="jarak">
       <h3>Lorem Ipsum</h3>
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, [...]</p>
       <button class="btn">Read More ..</button>
      </div>
     </div>
     <!-- end blog -->
    </div>
    <!-- kiri -->
    <!-- kanan -->
    <div class="kanan">
     <div class="jarak">
      <h3>CATEGORY</h3>
      <hr/>
      <p><a href="#" class="undecor">HTML</a></p>
      <p><a href="#" class="undecor">CSS</a></p>
      <p><a href="#" class="undecor">BOOTSTRAP</a></p>
      <p><a href="#" class="undecor">PHP</a></p>
      <p><a href="#" class="undecor">MYSQL</a></p>
      <p><a href="#" class="undecor">Jquery</a></p>
      <p><a href="#" class="undecor">Ajax</a></p>
     </div>
    </div>
    <!-- kanan -->
   </div>
  </div>
  <div class="footer">
   <div class="jarak">
    <p>copyright 2017 codebareng all reserved</p>
   </div>
  </div>
 </body>
</html>

Langkah 2 :
Buat file cssnya, dengan nama custom.css

body{
 background:#f3f3f3;
 color:#333;
 width:100%;
 font-family:sans-serif;
 margin:0 auto;
}

.header{
 width:90%;
 margin:auto;
 height:120px;
 line-height:120px;
 background:#41A85F;
 color:#fff;
}

.content{
 width:90%;
 margin:auto;
 height:420px;
 padding:0.1px;
 background:#fff;
 color:#333;
}

.kiri{
 width:70%;
 float:left;
 margin:auto;
 background:#fff;
 height:420px;
}

.kanan{
 width:30%;
 float:left;
 margin:auto;
 background:#fff;
 height:420px;
}

.border{
 border:2px solid #74C599;
 margin-top:1pc;
 padding-bottom:1pc;
 padding-left:2pc;
 padding-right:2pc;
}

.undecor{
 text-decoration:none;
}

.footer{
 width:90%;
 margin:auto;
 height:40px;
 line-height:40px;
 background:#41A85F;
 color:#fff;
}
.menu{
 background-color:#53bd84; 
 height:50px; 
 line-height:50px; 
 position:relative;
 width:90%;
 margin:0 auto;
 padding:0 auto;
}

.jarak{
 padding:0 2pc;
}

.menu ul {
 list-style:none;
}
 
.menu ul li a {
 float:left; 
 width:70px; 
 display:block; 
 text-align:center; 
 color:#FFF; 
 text-decoration:none; 
}
 
.menu ul li a:hover {
 background-color:#74C599; 
 display:block;
}

Langkah 3 :
Jalankan index.html pada layar browser mu ..

Demikian tutorial Kali ini Sekian dan Terima Kasih sudah berkunjung.

Happy Coding !

Thursday, May 11, 2017

Halaman Login terdapat pada Website Dinamis. Halaman ini adalah ‘pintu’ menuju halaman administrator, atau halaman user jika website-nya merupakan website yang mengharuskan penggunanya mempunyai akun.

Mengingat pentinya halaman ini, kita tidak bisa asal-asalan merancangnya. Desain halaman login yang bagus akan menghasilkan pengalaman pengguna yang baik.

Maka Dari itu saya disini akan share membuat template sederhana dengan menggunakan HTML dan Bootstrap. dengan model sederhana :D
oke langsung saja :

1. Download Bootstrap di Website Resmi nya ( cari di google )
2. setelah download selesai silahkan kamu buka XAMPP dan nyalakan Apache untuk web servernya, dan kemudian extract bootstrap kamu yg sudah di download tadi di folder project kamu, misalnya di C:\xampp\htdocs\login . maka nanti akan muncul 3 buah folder css, fonts dan js.
3.folder css berisi tentang file file style yang digunakan oleh bootstrap, file fonts berisi font yang dibutuhkan oleh css dan file js berisi file - file javascript.

setelah berhasil kamu extract di folder project kamu sekarang buatlah sebuah file dengan nama login.php

 
<!DOCTYPE HTML>
 <html>
  <head>
   <title>
    Login - CODEBARENG.NET
   </title>
   <link rel="stylesheet" href="assets/css/bootstrap.css">
   <link rel="stylesheet" href="assets/css/font-awesome.css">
  </head>
  <body style="background:#3598DC;">
   <div id="row" style="margin-top:9pc;">
    <div class="col-lg-3 col-lg-offset-4 centered">
     <div class="panel panel-default"  style="margin-left:3pc;">
      <div class="panel-heading">
       <h3>Input Data Login</h3>
      </div>
      <div class="panel-body">
       <form>
        <input type="text" class="form-control" placeholder="Username" name="user">
        <br>
        <input type="text" class="form-control" placeholder="Password" name="pass">
        <br>
        <button class="btn btn-primary btn-md"> SIGN IN</button>
        
        <span class="pull-right" style="padding-top:5px;">
         <a href="#">lost your password ?</a>
        </span>
       </form>
      </div>
     </div>
    </div>
   </div>
  </body>
 </html>

Oke Setelah itu Save dan Lihat Hasil nya
berikut hasilnya

Atau kamu bisa Download Disini :

Monday, April 24, 2017

Halo Semua, Jumpa Lagi di tutorial PHP www.codebareng.blogspot.com oke kali ini saya sebagai penulis ingin membagikan tutorial bagaimana sih cara Cara Membuat Koneksi Database MYSQL dengan PHP. Mengapa database MYSQL harus di hubungkan den PHP ?, Yep. Karena untuk memanipulasi Database pada php harus di hubungan dengan bahasa pemograman khusus nya yang satu ini yang akan saya bahas. Cara nya Bagaimana ?, cukup mudah ya hanya untuk mengkoneksikannya ke database. Karena PHP sudah menyediakan fungsi-fungsi khusus untuk menghubungkan PHP ke Database. Oke Langsung saja Pada tutorial kali ini kita bahas Cara Membuat Koneksi Database MYSQL dengan PHP.

Cara Membuat Koneksi Database MYSQL dengan PHP.

1. Buat Database Terlebih dahulu. dengan nama db_contoh.

2. Setelah Selesai buat Table sesuai keinginan kalian.. ( kalo tidak juga gpp ini hanya contoh )
3. Menghubungkan Database dengan PHP, Buatlah folder koneksi dan file koneksi.php di XAMPP
htdocs.. ( Saya Menggunakan XAMPP untuk Web Server )

<?php
    $user = 'root';
    $pass = 'Codebareng';

    try{
        $koneksi = new PDO('mysql:host=localhost;dbname=db_contoh',$user,$pass);
       echo 'Sukses Bro';
    }catch(PDOException $e){
        echo 'Gagal Koneksi Bro' .$e -> getMessage();
    }

?>

Ket :
$user adalah username phpmyadmin
$pass adalah password phpmyadmin / jika tidak pakai password kosongkan saja
db driver yang di gunakan : 'mysql'
host: 'localhost'
dbname: 'db_contoh'

4. Jika Sudah Buka Browser anda dan UjiCoba . url : localhost/koneksi/koneksi.php

Sekian lah tutorial kali ini Cara Membuat Koneksi Database MYSQL dengan PHP. Terima kasih sudah Berkunjung ^_^

Incoming search terms:

koneksi database php dengan xampp
Cara Membuat Koneksi Database MYSQL dengan PHP
cara membuat koneksi php
Membuat koneksi php
koneksi database
koneksi database php
cara menghubungkan php dengan mysql
cara koneksi php ke mysql
koneksi php dengan MySQL
cara koneksi php ke database
cara membuat koneksi database php mysql

Sunday, April 16, 2017

Text Formatting

Kita dapat menandai bagian-bagian tertentu dari sebuah teks HTML seperti cetak tebal, cetak miring dan lain-lain.

<b> - mencetak tebal teks
<strong> - menandai teks penting
<i> - mencetak miring teks
<em> - memberikan penekanan pada teks
<mark> - menandai teks dengan sorotan
<small> - membuat teks lebih kecil dari ukuran bawaan
<del> - memberi coretan pada teks
<ins> - mengarisbawahi teks
<sub> - membuat tulisan lebih bawah dari garis datar tulisan
<sup> - membuat tulisan lebih atas dari garis datar tulisan

Links

HTML link adalah elemen yang digunakan untuk membuat kaitan ke halaman lain. Ketika elemen link diklik maka halaman browser akan berpindah menampilkan halaman lain yang dituju link tersebut.

<a href="url">teks link</a>

Tag <a> menggunakan atribut href untuk menentukan alamat tujuan link. teks link adalah teks yang akan kita jadikan link. Ketika teks link diklik, maka halaman akan berpindah ke alamat tujuan link.

Kita tidak hanya dapat menggunakan teks sebagai link, tapi juga gambar atau elemen lainnya.

<a href="url"><img src="gambar.jpg" /></a>

Atribut Target

Atribut target kita gunakan untuk menentukan dimana alamat link harus dibuka.

_self - Membuka alamat link di tab/jendela browser yang sama (nilai bawaan)
_blank - Membuka alamat link di tab/jendela browser yang baru
_parent - Membuka alamat link di frame induk
_top - Membuka alamat link di jendela penuh
framename - Membuka alamat link di frame yang namanya sudah ditentukan

Umumnya kita akan sering menggunakan nilai _blank untuk menampilkan halaman di tab browser baru. Bila atribut ini tidak dipasang, maka nilai defaultnya adalah _self, artinya alamat link tersebut akan dibuka di jendela yang sedang aktif.

PHP adalah salah satu bahasa pemrograman sisi server yang paling banyak digunakan di dunia pemrograman web. PHP umumnya ditulis di dalam sebuah dokumen file berekstensi .php dan sintaksnya dibuka oleh tag <?php dan ditutup dengan tag ?>.

PHP

PHP adalah bahasa pemrograman web yang dijalankan di server
PHP digunakan untuk membuat halaman dinamis
PHP dapat terhubung dengan database
PHP dapat membuat halaman web dengan HTML maupun javascript
PHP dijalankan oleh server sebelum halaman ditampilkan

Variabel

Variabel adalah wadah untuk menyimpan suatu nilai. Pada PHP, syarat variabel diantaranya:

variabel diawali oleh tanda $ diikuti oleh nama variabelnya
nama variabel hanya boleh diawali oleh huruf dan underscore
nama variabel hanya boleh mengandung alfanumerik (A-z, 0-9, dan _)
nama variabel bersifat case sensitive (huruf kapital dan non-kapital dianggap berbeda)

<?php

     $nama =’siapa’;

     echo $nama;

?>

Echo

Echo adalah perintah untuk menampilkan output nilai ke layar. Kita dapat menampilkan output berupa nilai langsung ataupun nilai dari sebuah variabel. Perhatikan dan jalankan contoh kode di samping dan lihat masing-masing outputnya. Perhatikan juga keterangan komentar dari masing-masing barisnya.

<?php echo ‘hello world’;?>

Tipe Data

Tipe data adalah jenis dari data yang digunakan pada sebuah variabel. PHP mendukung tipe data berikut:

String adalah susunan dari huruf, angka dan karakter lainnya, seperti "Halo Coders!". String ditulis dengan diapit oleh tanda kutip (") atau tanda petik (').
Integer adalah tipe data angka non-desimal, dengan rentang -2,147,483,648 hingga 2,147,483,647.
Float adalah tipe data angka desimal. Tanda desimal yang digunakan adalah tanda titik.
Boolean adalah tipe data yang menyatakan dua kondisi, TRUE dan FALSE.
Array adalah tipe data yang digunakan untuk menyimpan lebih dari satu nilai data dalam satu variabel.
Object adalah tipe data yang menyimpan nilai data beserta sejumlah operasi data. Objek akan dibahas detail di pembahasan OOP.
NULL adalah tipe data dengan satu nilai saja, yakni NULL. Suatu variabel yang tidak berisi nilai dari tipe data lain, maka variabel tersebut bernilai NULL.

Umumnya kita menampilkan nilai dari suatu variabel dengan menggunakan perintah echo. Akan tetapi echo tidak akan menampilkan nilai dengan tipe data kompleks (yang tidak memiliki nilai tunggal). Untuk tipe data kompleks, kita dapat menggunakan perintah print_r() atau var_dump(). Fungsi var_dump() akan menampilkan output nilai berikut tipe datanya.

<?php

    $message = "Halo Programmer!";

    $lightspeed = 299792458;

    $pi = 3.14159265;

    $jomblo = TRUE;

    $goldarah = array('A', 'B', 'AB', 'O');

    $kosong;

    var_dump($lightspeed);



?>

Wednesday, February 8, 2017

1. Internal CSS

Internal CSS adalah istilah untuk kode CSS yang ditulis langsung dalam berkas HTML. Kode CSS ini dituliskan pada tag <style>. Tag ini bisa ditulis di dalam blok head atapun body, kedua-duanya sah. Nah, berikut ini contoh internal CSS.

<style>

.banner {width:600px; text-align:center; margin:0 auto; position: relative; -webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; border-radius: 5px 0 5px 5px; padding:50px 20px;}

.banner:before {content: ""; position: absolute; top: 0; right: 0;border-width: 0 24px 24px 0; border-style: solid; border-color:#F0F0F0 #fff; -webkit-border-radius: 0px 0 0px 5px; -moz-border-radius: 0px 0 0px 5px; border-radius: 0px 0 0px 5px;}

#screen {width:100%;color: #555;"Century Gothic",CenturyGothic,AppleGothic,sans-serif;line-height:45px;}

.txt-title {font-size:2em;}

.txt-subtitle {font-size:1.2em;}

</style>

2. Eksternal CSS

Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis disebuah berkas khusus yang berekstensi .css. Sebagai contoh, saya akan membuat sebuah berkas bernama main.css. Berikut ini cuplikan isi berkas main.css

p{
      font-family: serif;
      line-height: 1.75em;
}

i { 
      font-family: sans;
      color: orange;
}

h2 { 
      font-family: sans;
      color: #333;
}

Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya. Ada beberapa cara memasukkan kode CSS dari berkas eksternal:

<link rel="stylesheet" type="text/css" href="main.css">

Atau bisa juga seperti ini:

<style type="text/css">
@import "main.css";
</style>

Penulisan pada HTML versi lengkapnya seperti ini:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Eksternal CSS</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <h2>Ini judul artikel</h2>
  <p>internal css</p>
</body>
</html>

Hasilnya pun akan sama seperti contoh inline CSS, karena kode CSS-nya sama. Hanya saja berbeda tempat penulisannya.

3. Inline CSS

Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis. Contohnya seperti ini:

<h2 style="color:red; font-family: sans;">Ini judul artikel</h2>

SOURCE : http://www.petanikode.com/2015/07/berbagai-cara-menulis-kode-css-dalam.html

Setiap berkaitan dengan web pasti ada tombol button.. agar tampilan menarik dan bagus / tidak usah koding lagi css nya saya sarankan memakai bootstrap. apa itu bootstrap ? kamu bisa lihat di artikel sebelumnya Pengertian Bootstrap

Oke langsung saja kita buat..
Untuk gaya button bootstrap ada beberapa diantara nya seperti :
Hasil gambar untuk button bootstrap

.btn-default = Putih
.btn-primary = Biru
.btn-success = Hijau
.btn-info = biru muda
.btn-warning = oranye
.btn-danger = Merah
.btn-link

cara penulisan tag HTML seperti ini :

<button type="button" class="btn btn-primary btn-lg">Warna Biru</button>

untuk besar kecil nya button seperti gambar di atas kamu hanya perlu menambah kode btn-lg, btn-md, btn-sm dan btn-xs

btn-lg = untuk ukuran besar button (large)
btn-md = untuk ukuran sedang button (medium)
btn-sm = untuk ukuran kecil button (small)
btn-xs = untuk ukuran sangat kecil button (XSmall)

penulisan seperti ini :

<button type="button" class="btn btn-primary btn-lg">Large</button>

<button type="button" class="btn btn-primary btn-md">Medium</button>

<button type="button" class="btn btn-primary btn-sm">Small</button>

<button type="button" class="btn btn-primary btn-xs">XSmall</button>

itu saja tulisan dari saya terima kasih sudah berkunjung

Tuesday, February 7, 2017

Bootstrap adalah sebuah framework yang dibuat dengan menggunakan bahasa dari html dan css, namun juga menyediakan efek javascript yang dibangun dengan menggunakan jquery. Kelebihan dari bootstrap ini adalah dapat memudahkan seorang develop dalam membangun website static atau template web atau tema web.

Bootstrap telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang menggunakan bootstrap yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.

Tentu anda bertanya-tanya kenapa sangat banyak yang telah menggunakan bootstrap dalam pengembangan website. berikut ini akan di jelaskan beberapa kegunaan yang telah menjadi kelebihan pada bootsrap. adapun beberapa kelebihan bootstrap adalah sebagai berikut.

Penggunaan bootstrap sangat menghemat waktu.
Tampilan bootstrap yang sudah cukup terlihat modern.
Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet dan smartphone.
Sangat ringan karena bootstrap di buat dengan sangat terstruktur.
Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan bantuan framework css bootstrap.

Jika anda mau tau cara menggunakan bootstrap masuk ke link ini Cara Menggunakan Bootstrap

oke itu saja sekian ..

Pada artikel kali ini saya akan nulis Cara Menggunakan Bootstrap. Tentu nya dengan menggunakan Framework Boostrap ini kamu telah di permudah dalam segi design website-website yang kamu inginkan :D

langsung aja :

langkah pertama adalah silahkan kunjugi website resmi bootstrap di http://getbootstrap.com kemudian donwload bootstrap.
setelah download selesai silahkan kamu buka XAMPP dan nyalakan Apache untuk web servernya, dan kemudian extract bootstrap kamu yg sudah di download tadi di folder project kamu, misalnya di C:\xampp\htdocs\latihan1 . maka nanti akan muncul 3 buah folder css, fonts dan js.
folder css berisi tentang file file style yang digunakan oleh bootstrap, file fonts berisi font yang dibutuhkan oleh css dan file js berisi file - file javascript.

setelah berhasil kamu extract di folder project kamu sekarang buatlah sebuah file dengan nama index.php

kemudian ketikan kode standar berikut ini :

<!DOCTYPE html>

<html lang="en">

    <head>

      <title>Contoh Bootstrap</title>

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="css/bootstrap.css">

    </head>

    <body>

        <div class="container">

          <h1>menggunakan bootstrap</h1>

          <p>Ini adalah Text</p>

        </div>

    </body>

</html>

penjelasan :
1. script untuk memanggil file css bootstrap, dengan memakai cara pemanggilan memakai type penulisan "css external", di link kan masuk kedalam folder css lalu nama filenya. seperti di bawah ini :

<link rel="stylesheet" href="css/bootstrap.css">

2. lalu ini adalah salah satu contoh class yang terdapat dalam bootstrap

<div class="container">

lalu kamu jalankan di browser kesayangan anda di ketikan di url seperti ini :
http://localhost/latihan1/index.php

dan lihat hasilnya.
itu saja tulisan pada kali ini terimakasih sudah berkunjung..

halo kali ini saya share CARA CRUD XML dengan PHP, fitur tambah data, update/edit data, dan hapus data, pencarian data dengan menggunakan jquery data tables, lalu data di parsing ke xml , xml berfungsi database nya, lumayan untuk tugas XML bukan ? :D

okeee ini link downloadnya gann..
klik link : DOWNLOAD / DEMO
fitur:

HTML 5
CSS 3
BOOSTRAP 3
FONT AWESOME 4.6
JQUERY 3.1
JQUERY DATA TABLE
PHP
XML

oke itu saja selamat mencoba ...

NB : jika css nya berantakan, ganti link url di header.php seperti ini

<?php $url = 'http://localhost/namafolder'; ?>

Saturday, February 4, 2017

Tag pre adalah sebuah penanda yang hampir sama dengan blockquote. Tag pre sering digunakan dalam menyampaikan tutorial pemasangan Widget atau penerapan-penerapan yang berada pada HTML yang di mana di dalam isi tag pre ini berisi kode-kode seperti HTML, Javascript, CSS, JQuery, PHP, atau pun XML.

Cara Memasang Tag Pre dengan Tema Vanila di Blog

Nah sekarang saya akan membagikan tutorial cara pemasangan Tag pre dengan bertemakan Vanila. Ini cocok sekali bagi anda yang blognya Full Color.

Baiklah berikiut caranya.

1. Simpan kode CSS di bawah ini tepat sebelum kode ]]></b:skin>

pre {
background-color:white;
background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
-o-background-size:30px 30px;
background-size:30px 30px;
background-repeat:repeat;
font:normal bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
color:#333;
border:2px solid #666;
position:relative;
padding:0 7px;
margin:10px 0;
overflow:auto;
word-wrap:normal;
white-space:pre;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
box-shadow:0 1px 2px rgba(0,0,0,0.2);
position:relative;
}

pre[data-codetype] {
padding:29px 1em 7px 1em;
}

pre[data-codetype]:before {
content:attr(data-codetype);
display:block;
position:absolute;
top:0;
right:0;
left:0;
background-color:#666;
padding:0 7px;
font:bold 11px/20px Arial,Sans-Serif;
color:white;
}

pre[data-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}

pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;}

2. Lalu Simpan template

Dan untuk penerapan pada postingan di blog Anda gunakan kode di bawah ini pada mode HTML

<pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre>
<pre data-codetype="PHP"> ... </pre>
<pre data-codetype="XML"> ... </pre>

Demikian Tutorial ini terimakasih sudah berkunjung.

SUMBER : http://www.rumahmedia.id/2016/03/Cara-Memasang-Tag-Pre-dengan-Tema-Vanila-di-Blog.html

Thursday, February 2, 2017

Ok kali ini saya akan bahas cara CRUD di php

fitur-fitur contoh kali ini adalah :

1. Menggunakan bootstrap dan font-awesome sebagai desainnya
2. Dapat menginput data beserta gambar
3. Dapat mengedit data beserta gambar
4. Dapat menghapus data
5. Sudah menggunakan PDO ( php data object ) yang sudah familiar di pakai
6. search data menggunakan jquery data table

buat database db_crud

CREATE TABLE `anggota` (
`id_anggota` int(11) NOT NULL,
`nama` varchar(255) NOT NULL,
`alamat` text NOT NULL,
`telepon` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`jenkel` varchar(255) NOT NULL,
`gambar` varchar(255) NOT NULL,
`tgl_input` varchar(255) NOT NULL
) ;

lanjutt buat folder contoh crud lalu buat file:

config.php = untuk koneksi menghubungkan file ke database

index.php = buat menampilkan data

tambah.php = untuk tambah data

edit.php = untuk edit data

hapus.php = untuk hapus data

lalu buat folder assets untuk menyimpan
1. css
2. img
3. js

sesuai keperluan lalu download bootstrap, font awesome, jquery, dan datatables.js taruh di folder assets

oke kita koding mulai membuat koneksi dahulu :
config.php

<?php
 $user = 'root';
 $pass = ''; 
 
 $koneksi = new PDO('mysql:host=localhost;dbname=db_crud;', $user, $pass);

 
 if($koneksi){
  //echo 'koneksi berhasil';
 }else{
  echo 'gagal koneksi' .$e -> getMessage();
 }
?>

di atas di variabel $user, kita memakai username mysql default xampp dan $pass untuk password mysql di xampp di kosongkan saja, kita membuat $koneksi untuk memanggil dan konfigurasi database nya di situ ada if else, jika $koneksi bisa maka konfigurasi menyambungkan file php ke database berhasil, kalau tidak maka muncul error / gagalnya koneksi.

Jika koneksi berhasil maka comment saja seperti ini :

//echo 'koneksi berhasil';

setelah selesai masuk langkah ke 2 : index.php (untuk view data di database)

<!DOCTYPE HTML>

 <html>

  <head>

   <title>

    Contoh View

   </title>

   <link rel="stylesheet" href="assets/css/bootstrap.css">

   <link rel="stylesheet" href="assets/css/font-awesome.css">

   <link rel="stylesheet" href="assets/css/datatables.css">

   <script src="assets/js/jquery-3.1.1.min.js"></script>

   <style>

    body{width:95%;}

    .thead{

     background:#317CA3;

     color:#fff;

    }

   </style>

  </head>

  <body>

   <div class="row">

    <div class="container">

     <h1>Contoh Create Update Delete Search dan View Data</h1>

     

     <div style="padding-top:3pc;"></div>

     

     <div class="panel panel-primary">

      <div class="panel-heading">

       <h4><i class="fa fa-users"></i> Data

        <div class="pull-right">

         <a href="tambah.php"><button class="btn btn-primary"><i class="fa fa-user-plus"></i></button></a>

        </div>

       </h4>

      </div>

      <div class="panel-body">

       

       <table id="Mytable" class="table table-bordered" border="1">

        <thead>

         <tr class="thead">

          <td>No.</td>

          <td>Nama Anggota</td>

          <td>Alamat</td>

          <td>Telepon</td>

          <td>Email</td>

          <td>Jenis kelamin</td>

          <td>Gambar</td>

          <td>Tanggal Bergabung</td>

          <td style="width:80px;">Aksi</td>

         </tr>

        </thead>

        <tbody>

        <?php 

         require 'config.php'; // panggil koneksi yang sudah di buat

         $sql = 'select*from anggota order by id_anggota desc'; // query

         $row = $koneksi -> prepare($sql); // mempersiapkan untuk masuk ke eksekusi data

         $row -> execute();

         

         $hasil = $row -> fetchAll(); // tampilkan semua data di database

         $no =1; // membuat nomor

        ?>

        <?php foreach($hasil as $isi){ ?>

         <tr>

          <td><?php echo $no;?></td>

          <td><?php echo $isi['nama'];?></td>

          <td><?php echo $isi['alamat'];?></td>

          <td><?php echo $isi['telepon'];?></td>

          <td><?php echo $isi['email'];?></td>

          <td><?php echo $isi['jenkel'];?></td>

          <td>

           <a href="assets/img/<?php echo $isi['gambar'];?>">

            <img src="assets/img/<?php echo $isi['gambar'];?>" style="width100px;height:100px;" class="img-responsive">

           </a> 

          </td>

          <td><?php echo $isi['tgl_input'];?></td>

          <td>

           <a href="edit.php?anggota=<?php echo $isi['id_anggota'];?>"><button class="btn btn-primary"><i class="fa fa-edit"></i></button></a>

           <a href="hapus.php?anggota=<?php echo $isi['id_anggota'];?>"><button class="btn btn-danger" value="Deleteimage"><i class="fa fa-trash"></i></button></a>

          </td>

         </tr>

        <?php $no++; }?>

        </tbody>

       </table>

      </div>

     </div>

    </div>

   </div>

  </body>

  <script src="assets/js/datatables.js"></script>

  <script>

   $(document).ready(function(){

    $('#Mytable').DataTable();

   });

  </script>

 </html>

lalu buat file tambah.php untuk create data :

<?php date_default_timezone_set("Asia/Jakarta");?>
<!DOCTYPE HTML>
 <html>
  <head>
   <title>
    Contoh Create Data
   </title>
   <link rel="stylesheet" href="assets/css/bootstrap.css">
   <link rel="stylesheet" href="assets/css/font-awesome.css">
   <style>
    body{width:95%;}
    td{ padding-top:0.5pc;}
    .form-control{border-radius:0px;}
   </style>
  </head>
  <body>
   <div class="row">
    <div class="container">
     <h1>Contoh Create Update Delete Search dan View Data</h1>
     
     <div style="padding-top:3pc;"></div>
     
     <div class="panel panel-primary">
      <div class="panel-heading">
       <h4><i class="fa fa-user-plus"></i> Data
       <div class="pull-right">
         <a href="index.php"><button class="btn btn-primary"><i class="fa fa-home"></i></button></a>
        </div>
       </h4>
      </div>
      <div class="panel-body">
       <form method="post"  enctype="multipart/form-data">
        <table>
         <table width="55%;">
          <tr>
           <td class="pad">Nama</td>
           <td><input type="text" class="form-control" name="nama"></td>
          </tr>
          <tr>
           <td class="pad">Alamat</td>
           <td><input type="text" class="form-control" name="alamat"></td>
          </tr>
          <tr>
           <td class="pad">Telepon</td>
           <td><input type="text" class="form-control" name="telepon"></td>
          </tr>
          <tr>
           <td class="pad">Email</td>
           <td><input type="text" class="form-control" name="email"></td>
          </tr>
          <tr>
           <td class="pad">Jenis Kelamin</td>
           <td>
            <select name="jenkel" class="form-control">
             <option value="">Pilih Salah Satu</option>
             <option value="Laki-laki">Laki-laki</option>
             <option value="Perempuan">Perempuan</option>
            </select>
           </td>
          </tr>
          <tr>
           <td class="pad">Taruh Gambar</td>
           <td><input type="file" name="gambar"></td>
          </tr>
          <tr>
           <td class="pad">Tgl Input</td>
           <td><input type="text" class="form-control" value="<?php echo date('d M Y, H:i:s');?>" name="tgl_input"></td>
          </tr>
          <tr>
           <td></td>
           <td style="float:right;"><button name="proses" value="Tambah" class="btn btn-primary"> Tambah Anggota</button></td>
          </tr>
         </table>
        </table>
       </form>
      </div>
     </div>
    </div>
   </div>
  </body>
 </html>

<?php
require 'config.php';
 if(!empty($_POST['proses'])){
 $nama = $_POST['nama'];
 $alamat = $_POST['alamat'];
 $telepon = $_POST['telepon'];
 $email = $_POST['email'];
 $jenkel = $_POST['jenkel'];
 $tgl_input = $_POST['tgl_input'];
 
 $target = 'assets/img/';
 $target = $target. basename ($_FILES['gambar']['name']);
 
 if(move_uploaded_file($_FILES['gambar']['tmp_name'], $target)){
  $data[] = $nama; //1
  $data[] = $alamat;  //2
  $data[] = $telepon; //3
  $data[] = $email;   //4
  $data[] = $jenkel;  //5
  $data[] = $_FILES['gambar']['name'];  //6 
  $data[] = $tgl_input; //7
  $sql ='insert into anggota (nama, alamat, telepon, email,jenkel,gambar,tgl_input)values(?,?,?,?,?,?,?)';
  $row = $koneksi -> prepare($sql);
  $row -> execute($data);
  echo '<script>alert("Tambah Anggota Sukses");window.location="index.php"</script>';
 }else{
  echo '<script>alert("Gagal tambah Anggota")window.location="tambah.php";</script>';
 }
}
?>

setelah itu test create data nya jika berhasil lalu masuk ke proses edit.php

<?php date_default_timezone_set("Asia/Jakarta");?>
<?php require'config.php';?>
<?php $id = $_GET['anggota'];?>
<?php 
 $sql ='select * from anggota where id_anggota=?';
 $row = $koneksi -> prepare($sql);
 $row -> execute(array($id));
 $hasil = $row -> fetch();

?>
<!DOCTYPE HTML>
 <html>
  <head>
   <title>
    Contoh Edit Data
   </title>
   <link rel="stylesheet" href="assets/css/bootstrap.css">
   <link rel="stylesheet" href="assets/css/font-awesome.css">
   <style>
    body{width:95%;}
    td{ padding-top:0.5pc;}
    .form-control{border-radius:0px;}
   </style>
  </head>
  <body>
   <div class="row">
    <div class="container">
     <h1>Contoh Create Update Delete Search dan View Data</h1>
     
     <div style="padding-top:3pc;"></div>
     
     <div class="panel panel-primary">
      <div class="panel-heading">
       <h4><i class="fa fa-edit"></i> Data
       <div class="pull-right">
         <a href="index.php"><button class="btn btn-primary"><i class="fa fa-home"></i></button></a>
        </div>
       </h4>
      </div>
      <div class="panel-body">
       <form method="post"  enctype="multipart/form-data">
        <table>
         <table width="55%;">
          <tr>
           <td class="pad">Nama</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['nama'];?>" name="nama"></td>
          </tr>
          <tr>
           <td class="pad">Alamat</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['alamat'];?>" name="alamat"></td>
          </tr>
          <tr>
           <td class="pad">Telepon</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['telepon'];?>" name="telepon"></td>
          </tr>
          <tr>
           <td class="pad">Email</td>
           <td><input type="text" class="form-control" value="<?php echo $hasil['email'];?>" name="email"></td>
          </tr>
          <tr>
           <td class="pad">Jenis Kelamin</td>
           <td>
            <select name="jenkel" class="form-control">
             <option value="<?php echo $hasil['jenkel'];?>"><?php echo $hasil['jenkel'];?></option>
             <option value="">Pilih Salah Satu</option>
             <option value="Laki-laki">Laki-laki</option>
             <option value="Perempuan">Perempuan</option>
            </select>
           </td>
          </tr>
          <tr>
           <td class="pad">Taruh Gambar</td>
           <td><input type="file" name="gambar"></td>
          </tr>
          <tr>
           <td><input type="hidden" class="form-control" value="<?php echo $hasil['id_anggota'];?>" name="id"></td>
           <td>
            <a href="assets/img/<?php echo $hasil['gambar'];?>">
             <img src="assets/img/<?php echo $hasil['gambar'];?>" style="width100px;height:100px;" class="img-responsive">
            </a> 
           </td>
          </tr>
          <tr>
           <td></td>
           <td style="float:right;"><button name="proses" value="Tambah" class="btn btn-primary"> Tambah Anggota</button></td>
          </tr>
         </table>
        </table>
       </form>
      </div>
     </div>
    </div>
   </div>
  </body>
 </html>

<?php
 if(!empty($_POST['proses'])){
 $nama = $_POST['nama'];
 $alamat = $_POST['alamat'];
 $telepon = $_POST['telepon'];
 $email = $_POST['email'];
 $jenkel = $_POST['jenkel'];
 $id = $_POST['id'];
 $target = 'assets/img/';
 $target = $target. basename ($_FILES['gambar']['name']);
 
 if(move_uploaded_file($_FILES['gambar']['tmp_name'], $target)){
  $data[] = $nama; //1
  $data[] = $alamat;  //2
  $data[] = $telepon; //3
  $data[] = $email;   //4
  $data[] = $jenkel;  //5
  $data[] = $_FILES['gambar']['name'];  //6 
  $data[] = $id; //7
  $sql ='update anggota set nama=?, alamat=?, telepon=?, email=?,jenkel=?,gambar=? where id_anggota=?';
  $row = $koneksi -> prepare($sql);
  $row -> execute($data);
  echo '<script>alert("Edit Anggota Sukses");window.location="index.php"</script>';
 }elseif($_POST['proses'] == 'Tambah'){
  $data[] = $nama; //1
  $data[] = $alamat;  //2
  $data[] = $telepon; //3
  $data[] = $email;   //4
  $data[] = $jenkel;  //5
  $data[] = $id; //6
  $sql ='update anggota set nama=?, alamat=?, telepon=?, email=?,jenkel=? where id_anggota=?';
  $row = $koneksi -> prepare($sql);
  $row -> execute($data);
  echo '<script>alert("Edit Anggota Sukses");window.location="index.php"</script>';
 }else{
  echo '<script>alert("Gagal Edit Anggota")window.location="tambah.php";</script>';
 }
}
?>

lalu setelah edit data bisa membuat hapus.php untuk hapus data :

<?php
 require 'config.php';
 $id = $_GET['anggota'];
 $sql = 'select *from anggota where id_anggota=?';
 $row = $koneksi -> prepare($sql);
 $row -> execute(array($id));
 $hasil = $row -> fetch();

 
 unlink('assets/img/'.$hasil['gambar'].''); //hapus img di folder
 
 $sql_delete = 'delete from anggota where id_anggota=?';
 $row_delete = $koneksi -> prepare($sql_delete);
 $row_delete -> execute(array($id));
 
 echo '<script>alert("Hapus Berhasil");window.location="index.php";</script>';
?>

setelah itu coba dan jalankan jika anda error silahkan di download sekian semoga berhasil

Saturday, January 28, 2017

Script Login dan pendaftaran dengan html5 / css3 dan jquery
yah kali ini saya hanya ngasih script aja dulu ya buat login / sign up pakai jquery.. kalau kamu belum tau apa itu jquery ini saya jelaskan dulu..

JQUERY :

sebuah library JavaScript. Dalam dunia pemrograman, library adalah kumpulan dari berbagai fungsi 'siap pakai' untuk memudahkan pembuatan sebuah aplikasi. Dengan demikian, jQuery adalah kumpulan fungsi-fungsi JavaScript yang memudahkan penulisan kode JavaScript.

SOURCE : www.duniailkom.com/tutorial-belajar-jquery-pengertian-jquery/

oke itu saja langsung koding dulu.. simpan di login.php di halaman htdocs/folderbaru/ atau sesuai selera

<!DOCTYPE HTML>
<html>
    <head>
        <title>Latihan jquery </title>
        <script type="text/javascript" src="jquery-3.1.1.js"></script>
        <!--  Created by : fauzan1892  -->
        <style>
             body{ background:#ddd; color:#fff; width:99%; font-family:sans serif;}
            .row{ background:#24303C; margin:0 545px; margin-top:5pc; }
            .sub-menu{ text-align:center; padding-top:1pc; padding-bottom:1pc;}
            .btn-1{width:10pc; height:2.5pc; border:0px; font-size:16px; background:#1AB188;color:#fff;}
            .btn-2{width:10pc; height:2.5pc; border:0px; font-size:16px; background:#FE5E54;color:#fff;}
            .body{ text-align:center; }
             center{font-size:20px;}
            .form{border:1px solid #fff; height:2.5pc; font-size:16px; padding-left:5px; background:#24303C; color:#fff;width:84%;}
            .pull-left{float:left; width:45%; padding-left:18.5px;}
            .pull-right{float:right;width:45%;  padding-right:18.5px;}
        </style>
    </head>
    <body>
        <div class="row">
            <div class="sub-menu">
                <a href="#" id="formlogin"><button class="btn-1">Sign In</button></a>
                <a href="#" id="formdaftar"><button class="btn-2">Sign Up</button></a>
            </div>
            <div id="login">
                <div class="container">
                    <div class="body">
                        <br>
                            <center>Sign In For Admin</center>
                        <br>
                        <form method="POST" action="">
                            <input type="text" class="form" placeholder="Username *" name="username" required="required">
                            <br><br>
                            <input type="password" class="form" placeholder="Password *" name="password" required="required">
                            <br><br>
                            <p><button class="btn-1" name="proses">LOG IN</button></p>
                            <br>
                        </form>
                    </div>
                </div>
            </div>
            <div id="daftar">
                <div class="container">
                    <div class="body">
                        <br>
                            <center>Sign Up For New Member</center>
                        <br><br>
                        <form method="POST" action="">
                            <div class="pull-left">
                                <input type="text" class="form" placeholder="First Name *" name="email" required="required">
                            </div>
                            <div class="pull-right">
                                <input type="text" class="form" placeholder="Last Name *" name="email" required="required">
                            </div>
                            <br><br><br>
                            <input type="text" class="form" placeholder="Email Address *" name="email" required="required">
                            <br><br>
                            <input type="text" class="form" placeholder="Username *" name="username" required="required">
                            <br><br>
                            <input type="password" class="form" placeholder="Set A Password *" name="password" required="required">
                            <br><br>
                            <input type="password" class="form" placeholder="Retype Password *" name="retype" required="required">
                            <br><br>
                            <p><button class="btn-2" name="proses">GET STARTED</button></p>
                            <br>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#daftar').hide();
            $('#formdaftar').click(
                function(){
                    $('#daftar').show();
                    $('#login').hide();
                }
            );
        </script>
        <script>
            $('#login').hide();
            $('#formlogin').click(
                function(){
                    $('#login').show();
                    $('#daftar').hide();
                }
            );
        </script>
    </body>
</html>

hasil :

oke itu dulu sekian terima kasih

PHP adalah bahasa pemrograman yang dijalankan pada server yang terinstall web server. Artinya semua baris program akan sepenuhnya dijalankan pada web server sedangkan yang dikirimkan ke browser pengguna hanya hasilnya saja.

HTML adalah bahasa standard untuk membuat halaman web statis. HTML dapat secara langsung dijalankan dan ditampilkan dengan bantuan browser.

PHP

PHP adalah bahasa pemrograman web yang dijalankan di server
PHP digunakan untuk membuat halaman dinamis
PHP dapat terhubung dengan database
PHP dapat membuat halaman web dengan HTML maupun javascript
PHP dijalankan oleh server sebelum halaman ditampilkan

HTML

HTML dapat langsung dijalankan disisi klien
HTML digunakan untuk menyusun halaman web statis
HTML dapat ditampilkan dalam bentuk objek tabel, tulisan dan sebagainya

Mengenal Element HTML

Sebuah elemen HTML umumnya tersusun dari tag pembuka dan tag penutup, dengan konten yang disimpan diantara keduanya.

<namatag>Konten di dalam tag</namatag>

Tag HTML adalah nama dari elemen HTML, ditulis di antara tanda kurung sudut < dan >, misalnya <h1> dan <p>.

Tag penutup ditulis seperti tag pembuka, dengan diawali karakter garis miring / sebelum nama tagnya, misalnya </h1> dan </p>.

Konten elemen adalah semua konten yang ada di antara tag pembuka dan tag penutup.

Tag mendefinisikan maksud konten yang ada di dalamnya. Ketika kita menuliskan sebuah konten menggunakan tag <h1>, misalnya <h1>Halo Coder!</h1> berarti kita mendefinisikan konten "Halo Coders!" sebagai sebuah heading besar. Ketika kita menulis konten di dalam tag <p> maka berarti kita mendefinisikan konten tersebut sebagai sebuah paragraf.

Tag sendiri tidak akan ditampilkan di browser. Tag hanya menjadi pengenal untuk browser dalam menentukan seperti apa sebuah konten ditampilkan. Misalnya, ketika kita menulis <strong>Kereeen!</strong>, maka konten di dalam tag tersebut akan ditampilkan sebagai tulisan yang dicetak tebal, seperti ini:

Kereen!

Meski demikian tidak semua elemen html ditulis dengan tag pembuka dan penutup. Ada juga elemen yang ditulis tanpa penutup, misalnya:

<br />
<img src="image.jpg" />

Elemen <br> dan <img> di atas tidak memiliki tag penutup, melainkan menutup dirinya sendiri dengan diakhiri karakter />.

Atribut HTML adalah informasi tambahan yang diperlukan oleh sebuah elemen HTML.

Pada pembahasan sebelumnya kita sudah melihat contoh elemen <img>. Elemen ini memiliki konten tambahan di dalam tagnya, yakni src.

<img src="image.jpg" />

src yang terdapat di dalam tag <img> adalah salahsatu contoh atribut HTML.

Atribut HTML selalu didefinisikan di dalam tag pembuka suatu elemen. Atribut biasanya ditulis dalam bentuk pasangan nama dan nilai atribut dengan format seperti ini: nama="nilai".

Semua elemen HTML dapat mengandung atribut, baik itu atribut yang umum yang dapat dimiliki oleh semua elemen HTML, maupun atribut khusus untuk elemen HTML tertentu. Contoh atribut umum adalah id dan class. Contoh atribut khusus adalah src pada elemen <img> dan href pada elemen <a>.

Nama Atribut

Nama atribut dapat ditulis baik menggunakan huruf kapital maupun huruf kecil, akan tetapi sangat dianjurkan menggunakan huruf kecil semua sebagai sebuah standar sejak versi XHTML.

Nilai Atribut

Nilai dari atribut HTML dapat ditulis tanpa menggunakan tanda kutip. Namun dalam banyak kasus tanda kutip harus digunakan untuk membungkus nilai atribut yang mengandung spasi.

<h1 title=judul konten>Pendahuluan</h1>

Pada contoh di atas, atribut title bernilai 'judul' dan kata 'konten' akan dianggap sebagai sebuah atribut lain karena antara kata 'judul' dan 'konten' terpisah oleh koma. Bila kita hendak mengisi nilai atribut title di atas dengan 'judul konten', maka kita harus menulisnya dengan tanda kutip:

<h1 title="judul konten">Pendahuluan</h1>

Tanda Kutip atau Petik?

Nilai atribut dapat menggunakan baik tanda kutip " maupun tanda petik '. Bila kita membuka dengan tanda kutip, maka tutup juga dengan tanda kutip. Begitu pula bila membuka dengan tanda petik, maka tutuplah dengan tanda petik.

Hal ini sangat berguna bila nilai atribut mengandung tanda kutip atau petik. Bila nilai atribut mengandung tanda kutip, maka gunakanlah petik untuk membungkus nilai atribut. Dan bila nilai atribut mengandung tanda petik, maka gunakanlah kutip untuk membungkus nilai atribut.

<h1 title='Bosnya "Linux"'>Linus Torvald</h1>

Salah satu plug-in yang digunakan pada AdminLTE adalah Data Tables. Data Tables merupakan sebuah plug-in JQuery untuk memanipulasi data dalam tabel HTML. Data Tables memungkinkan kita melakukan pencarian di tabel, membuat pagination, menampilkan data sebanyak yang kita mau, mengambil data dari ajax, dsb.

1. Menyisipkan Data Tables

Plug-in Data Tables yang saya gunakan pada tulisan ini adalah versi online melalui CDN. Bila anda ingin menggunakan versi offline, silahkan di-download dulu Data Tables-nya di https://datatables.net/download/index. Berikut ini cara menyisipkan Data Tables melalui CDN.

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

2. Kode HTML

Kode Tabel ini saya ambil dari web resmi data tables.


<section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">Hover Data Table</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="tabel-data" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>Rendering engine</th>
                  <th>Browser</th>
                  <th>Platform(s)</th>
                  <th>Engine version</th>
                  <th>CSS grade</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 4.0
                  </td>
                  <td>Win 95+</td>
                  <td> 4</td>
                  <td>X</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 5.0
                  </td>
                  <td>Win 95+</td>
                  <td>5</td>
                  <td>C</td>
                </tr>
                <tr>
                  <td>Trident</td>
                  <td>Internet
                    Explorer 5.5
                  </td>
                  <td>Win 95+</td>
                  <td>5.5</td>
                  <td>A</td>
                </tr>
               </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
         </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>

3. Persiapan Data Tables

Kita akan menerapkan Data Tables saat web di-load. taruh di footer

<script>
  $(document).ready(function(){
       $('#tabel-data').DataTable();
  });
</script>

Perhatikan #tabel-data, kata kunci tersebut untuk memilih tabel dengan ID tabel-data. Kemudian, method .DataTable() fungsinya untuk menerapkan Data Tables pada tabel yang dipilih.

Headings

Headings adalah elemen HTML yang digunakan untuk menampilkan judul dari sebuah konten. Elemen headings ada 6 jenis, yakni <h1>, <h2>, <h3>, <h4>, <h5> dan <h6>.

Elemen <h1> menunjukkan tingkat kepentingan yang lebih tinggi daripada <h2> dan seterusnya. Elemen <h1> umumnya akan ditampilkan dengan ukuran huruf yang lebih besar dibanding <h2>, dan begitu seterusnya sampai <h6>.

Bila kita hendak membuat judul sebuah konten, maka gunakanlah <h1> sebagai prioritas utama. Bila hendak membuat subjudul di dalam konten, maka gunakan <h2>, dan bila hendak membuat sub-subjudul, maka gunakan <h3>, dan seterusnya.

Paragraph

Elemen <p> mendefinisikan sebuah konten paragraf.


<p>Ini adalah sebuah paragraf.</p>

<p>Dan ini adalah paragraf lain.</p>

Suatu konten teks yang kita tulis di dalam sebuah elemen HTML dan kita buat baris baru atau spasi/tab di dalamnya, akan tetap dihitung sebagai satu spasi.


<p>Ini adalah sebuah paragraf.</p>

Kode HTML di atas akan tetap ditampilkan dalam satu baris tanpa ada jarak spasi lebih dari satu di dalamnya. Bila kita hendak membuat baris baru di dalam sebuah teks, maka gunakanlah tag <br> atau <br />.

<p>Ini<br>

adalah<br>

sebuah<br>

paragraf.</p>

Translate

Labels

Latest Post

Sunday, August 6, 2017

5 CMS Terbaik Buatan Indonesia Gratis

1. CMS Sekolahku

2. PopojiCMS

3. Fiyo CMS

4. Lokomedia CMS

5. HTMLy

Saturday, May 13, 2017

Thursday, May 11, 2017

Monday, April 24, 2017

Cara Membuat Koneksi Database MYSQL dengan PHP.

Incoming search terms:

Sunday, April 16, 2017

Text Formatting

Links

Atribut Target

PHP

Variabel

Echo

Tipe Data

Wednesday, February 8, 2017

1. Internal CSS

2. Eksternal CSS

3. Inline CSS

Tuesday, February 7, 2017

Saturday, February 4, 2017

Thursday, February 2, 2017

Saturday, January 28, 2017

PHP

Mengenal Element HTML

Atribut HTML adalah informasi tambahan yang diperlukan oleh sebuah elemen HTML.

Nama Atribut

Nilai Atribut

Tanda Kutip atau Petik?

1. Menyisipkan Data Tables

2. Kode HTML

3. Persiapan Data Tables

Headings

Paragraph

Popular Posts

Labels

Total Pageviews

Labels

CODE BARENG

share kode program, tutorial php bahasa indonesia, Berisi Aplikasi yang di bagikan untuk para pembaca guna untuk dipelajari bersama