7 Framework PHP Terbaik dan Terpopuler versi Coding Rakitan
PHP merupakan singkatan dari Personal Home Page yaitu salah satu bahasa pemrograman berbasis web. Sebagai bahasa pemrograman web PHP menjadi primadona...
Home » Penelusuran Web
PHP merupakan singkatan dari Personal Home Page yaitu salah satu bahasa pemrograman berbasis web. Sebagai bahasa pemrograman web PHP menjadi primadona dikarenakan banyaknya framework yang menggunakan bahasa ini. Berikut beberapa framework PHP terkenal yang banyak digunakan.
Laravel
Laravel merupkan framework PHP yang selalu up-to-date dengan versi PHP. Laravel mengusung konsep MVC (Model, View, Controller) dalam penggunaanya. Laravel dirancang dengan tujuan meningkatkan kualitas aplikasi dengan murangi biaya pengembangan awal.Untuk mengetahui lebih lanjut tentang laravel silahkan kunjungi Mengenal Apa Itu Laravel dan Cara Penginstalannya.
Codeigniter
Codeigniter merupakan salah satu framework PHP yang mengusung konsep MVC sama halnya seperti laravel. CI atau Codeigniter pertama kali dirilis pada tanggal 28 Februari 2006.Untuk mengetahui lebih lanjut tentang Codeigniter silahkan kunjungi postingan Mengenal Apa itu Codeigniter (CI) beserta Sejarahnya
Symfony
Symfony dirilis pada tahun 2005 oleh Fabien Potencier. Dalam hal kualitas, tidak perlu dipertanyakan lagi sebab Symfony disusun berdasarkan standar PSR (PHP standard recommendation). Ketersediaan integrasi dari vendor library yang lain, menjadi salah satu keunggulan framework ini.Symfony memiliki banyak dokumentasi yang ditulis dengan cermat, mencakup semua fituy Symfony. Untuk mendownload sekaligus melihat dokumentasi dari symfony silahkan kunjungi langsung halaman resminya disini.
CakePHP
CakePHP merupakan framework PHP bersifat open source yang dikembangkan oleh Cake Software Foundation. Tujuan utama dari CakePHP adalah menyediakan framework yang memungkinkan pengguna bekerja secara terstruktur dan cepat tanpa kehilangan fleksibilitas.Dukungan dari tim pengembang serta komunitas yang aktif menjadi nilai tambah bagi CakePHP dalam mengait pengguna. Untuk mengetahui manfaat lain dari CakePHP silahkan kunjungi langsung disini.
Yii
Yii merupakan framework PHP yang dikembangkan oleh Yii Software LLC. Yii lahir dengan mengadopsi konsep MVC dalam struktur pemrogramannya.Framework ini dirancang sebagai krangka kerja php berbasis komponen dengan performa tinggi untuk pembuatan aplikasi web berskala besar.
Diawal pengembangannya sejak 1 Januari 2008 oleh Qiang Xue (programer asal Tiongkok), framework Yii menggunakan bahasa kerangka kerja PRADO. Yii versi 1.0 akhirnya secara resmi di rilis pada 3 Desember 2008 setelah mengalami koreksi dan penyempurnaan.
The Zend Framework
Zend Framework merupakan framework php yang dikembangkan oleh Zend Technologies yaitu sebuah perusahaan perangkat lunak asal Amerika Serikat. Seperti halnya framework PHP kebanyakan, Zend juga mengadopsi konsep Model View Controller.Framework ini juga bisa menggunakan Composer dalam penginstalan packagenya.
Hal yang membuat framework ini menjadi unik, dikarenakan Zend Framework menyediakan sertifikat resmi bagi yang ingin menjadi professional Zend Framework.
Zend Framework diluncurkan pertama kali pada 3 Maret 2006, untuk versi stabil 3.0.0 pada 28 Juni 2016. Framework ini ditulis dalam bahasa PHP 7 dan mendukung lintas platform.
FuelPHP
Salah satu framework PHP yang memiliki pengguna cukup banyak adalah FuelPHP. Framework ini termasuk sederhana dan fleksibel serta memiliki dukungan komunitas developer yang baik.Pengguna FuelPHP akan disuguhi dengan kinerja framework ini yang minimalis, cepat, dan ringan serta clean syntax. Selain itu FuelPHP juga mendukung Composer, yang akan memudahkan programer dalam instalasi dependency FuelPHP pada project yang di kerjakan.
Pengguna Laravel atau Codeigniter tidak akan sulit beredaptasi dengan Framework ini dikarenakan FuelPHP juga mengusung konsep MVC.
Aziz Blogger October 09, 2019 Admin Bandung Indonesia
XAMPP merupakan aplikasi atau perangkat lunak yang berfungsi sebagai server yang berdiri sendiri (localhost). Aplikasi ini bersifat open source yang dapat di install di berbagai platform seperti Windows, Linux, serta Mac OS.
Nama XAMPP adalah singkatan dari X (sistem operasi), Apache, MySQL, PHP dan Pearl. Seperti namanya XAMPP memang terdiri dari beberapa aplikasi yang disatukan. Aplikasi ini akan sangat membantu pengembang web dalam membangung sebuah aplikasi Web.
Kegunaan XAMPP
Ada beberapa kegunaan XAMPP yang perlu diketahui oleh pemula. Berikut kegunaan XAMPP tersebut.- Sebagai server Seperti yang sudah dikatakan diatas fungsi utama XAMPP adalah sebagai server, sebuah web dimana diserver tersebut di atur file-file yang akan di tampilkan pada halaman web.
- Penghubung ke Database Dalam membangun sebuah web database sangat diperlukan untuk menyimpan sebuah data. XAMPP berfungsi sebagai penghubung web dengan database yaitu database MYSQL.
- Membantu perancangan aplikasi web secara offline XAMPP membantu programer dalam membangun aplikasi web secara offline sebelum akhirnya di onlinekan di Internet.
Cara Instalasi XAMPP
Untuk menginstall XAMPP tidaklah sulit anda hanya perlu mengunduh file masternya disini.- Eksekusi hasil file yang telah di download.
- Pada jendela baru klik Next
- Centang semua aplikasi yang ada pada jendela selanjutnya lalu klik Next.
- Jendela selanjutnya adalah untuk mengatur letak file instalasi XAMPP diletakkan, nantinya folder htdocs tempat anda meletakkan project web juga diletakkan disini. Jadi pastikan folder ini sudah sesuai dengan yang anda inginkan. Secara default folder instalasinya berada di C:\xampp
- Silahkan klik Next untuk jendela-jendela yang muncul selanjutnya. Hingga proses instalasi dimulai seperti pada gambar dibawah.
- Terakhir klik finish
Project pertama ini kita mulai dengan membuat sebuah web sederhana yaitu hello world. Tutorial ini saya tujukan untuk pemula dalam dunia pemrograman web khususnya pemula dalam menggunakan XAMPP. Ikuti langkah-langkah di bawah ini.
- Buka aplikasi XAMPP.
- Klik tombol start pada Apache dan Mysql hingga warnanya menjadi hijau serta tombol statrt menjadi tombol stop seperti gambar dibawah.
- Sekarang buka folder htdocs di lokasi penginstalan tadi. Saya sendiri lokasinya ada di C:\xampp\htdocs. Silahkan buat folder baru di dalam folder tersebut dengan nama "belajar" seperti gambar dibawah. Folder dengan lingkaran merah adalah folder yang baru saya buat sedangkan yang lainnya adalah project web yang pernah dibuat sebelumnya.
- Buat sebuah file dengan nama index.html. Anda bisa menggunakan editor seperti sublime text, notepad++, atau sejenisnya.
- Buka browser internet anda seperti Mozilla atau Chrome. Ketikkan di alamt urlnya dengan localhost/belajar
<!DOCTYPE html>
<html>
<head>
<title>Belajar XAMPP</title>
</head>
<body>
<h1>Hello World !!</h1>
</body>
</html>
<html>
<head>
<title>Belajar XAMPP</title>
</head>
<body>
<h1>Hello World !!</h1>
</body>
</html>
- Selamat belajar membuat aplikasi-aplikasi selanjutnya.
Mengenal dan Menginstall XAMPP
XAMPP merupakan aplikasi atau perangkat lunak yang berfungsi sebagai server yang berdiri sendiri (localhost). Aplikasi ini bersifat open source yang dapat...
Tentunya anda sudah sering melihat web form pendaftaran dimana terdapat sesi upload foto. Sebelum mengupload foto ke server, biasanya gambar dapat dilihat di bagian tertentu di web tersebut. Hal ini bertujuan agar user tidak salah dalam memasukkan gambar atau foto.
Untuk menampilkan gambar tersebut, kita bisa memanfaatkan bahasa pemrograman javascript. Hasil dari pembuatan aplikasi ini nantinya akan tampak seperti gambar di bawah.
Ketika user selesai memilih gambar maka akan muncul seperti gambar di bawah.
Ikuti langkah dibawah ini untuk membuat aplikasi web seperti di atas.
1. Buat direktory atau folder Buat folder baru untuk menampung gambar, css, dan file html. Adapun gambar yang akan ditampung adalah gambar berikut.
Silahkan download gambar di atas dan masukkan ke folder yang telah anda buat dengan nama no-image.png.
2. Buat file css.css Silahkan buat file css.css dan isi sesuai dengan kode di bawah.
body{
margin: 0px;
padding: 0px;
background: #dedede;
display: flex;
height: 100%;
width: 100%;
position: absolute;
font-family: roboto;
}.container{
width: 50%;
overflow: hidden;
min-height: 200px;
background: white;
margin: auto;
border-radius: 4px;
box-shadow: 1px 1px 3px black;
}.image{
min-height: 200px;
width: 50%;
margin: auto;
object-fit: cover;
padding: 20px;
margin-top: 20px;
}.image img{
width: 100%;
}.tombol{
margin-top: 20px;
padding: 20px;
text-align: center;
}button{
padding: 20px;
padding-top: 10px;
padding-bottom: 10px;
background: unset;
border-radius: 4px;
border: 1px solid #dedede;
cursor: pointer;
}.btn-success{
background: green;
color: white;
}.btn-danger{
background: red;
color: white;
}.btn-primary{
background: blue;
color: white;
}p{
color: grey;
font-size: 12px;
text-align: center;
}.head{
background: #baffae;
padding: 20px;
border-bottom: 1px solid #c8c8c8;
}.head h2{
margin: 0px;
font-weight: 300;
}.fot{
padding: 10px;
border-top: 1px solid #c8c8c8;
font-size: 12px;
}.kata{
padding-top: 20px;
padding-left: 20px;
}.kata p{
color: black;
font-size: 15px;
text-align: left;
}
margin: 0px;
padding: 0px;
background: #dedede;
display: flex;
height: 100%;
width: 100%;
position: absolute;
font-family: roboto;
}.container{
width: 50%;
overflow: hidden;
min-height: 200px;
background: white;
margin: auto;
border-radius: 4px;
box-shadow: 1px 1px 3px black;
}.image{
min-height: 200px;
width: 50%;
margin: auto;
object-fit: cover;
padding: 20px;
margin-top: 20px;
}.image img{
width: 100%;
}.tombol{
margin-top: 20px;
padding: 20px;
text-align: center;
}button{
padding: 20px;
padding-top: 10px;
padding-bottom: 10px;
background: unset;
border-radius: 4px;
border: 1px solid #dedede;
cursor: pointer;
}.btn-success{
background: green;
color: white;
}.btn-danger{
background: red;
color: white;
}.btn-primary{
background: blue;
color: white;
}p{
color: grey;
font-size: 12px;
text-align: center;
}.head{
background: #baffae;
padding: 20px;
border-bottom: 1px solid #c8c8c8;
}.head h2{
margin: 0px;
font-weight: 300;
}.fot{
padding: 10px;
border-top: 1px solid #c8c8c8;
font-size: 12px;
}.kata{
padding-top: 20px;
padding-left: 20px;
}.kata p{
color: black;
font-size: 15px;
text-align: left;
}
3. Buat file index.html Silahkan buat file index.html dan isi sesuai dengan kode di bawah.
<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="container">
<div class="head">
<h2>Upload Image</h2>
</div>
<div class="kata">
<p>Gambar yang dipilih nantinya akan muncul dibawah ini.</p>
</div>
<div class="image">
<img src="no-image.png" id="gambar">
</div>
<p>Klik tombol pilih file untuk memilih file dari komputer anda.</p>
<div class="tombol">
<input type="file" name="files" id="file" style="display: none;">
<button id="pilih" class="btn-primary">Pilih file</button>
</div>
<div class="fot">
created by @ <a href="http://codingrakitan.blogspot.com">codingrakitan.blogspot.com</a>
</div>
</div>
<script type="text/javascript">
var tm_pilih = document.getElementById('pilih');
var file = document.getElementById('file');
tm_pilih.addEventListener('click', function () {
file.click();
})
file.addEventListener('change', function () {
gambar(this);
})
function gambar(a) {
if (a.files && a.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('gambar').src=e.target.result;
}
reader.readAsDataURL(a.files[0]);
}
}
</script>
</body>
</html>
<html>
<head>
<title>Coding Rakitan</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class="container">
<div class="head">
<h2>Upload Image</h2>
</div>
<div class="kata">
<p>Gambar yang dipilih nantinya akan muncul dibawah ini.</p>
</div>
<div class="image">
<img src="no-image.png" id="gambar">
</div>
<p>Klik tombol pilih file untuk memilih file dari komputer anda.</p>
<div class="tombol">
<input type="file" name="files" id="file" style="display: none;">
<button id="pilih" class="btn-primary">Pilih file</button>
</div>
<div class="fot">
created by @ <a href="http://codingrakitan.blogspot.com">codingrakitan.blogspot.com</a>
</div>
</div>
<script type="text/javascript">
var tm_pilih = document.getElementById('pilih');
var file = document.getElementById('file');
tm_pilih.addEventListener('click', function () {
file.click();
})
file.addEventListener('change', function () {
gambar(this);
})
function gambar(a) {
if (a.files && a.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('gambar').src=e.target.result;
}
reader.readAsDataURL(a.files[0]);
}
}
</script>
</body>
</html>
Penjelasan kode :
Kode yang perlu diperhatikan terletak di :
<script type="text/javascript">
var tm_pilih = document.getElementById('pilih');
var file = document.getElementById('file');
tm_pilih.addEventListener('click', function () {
file.click();
})
file.addEventListener('change', function () {
gambar(this);
})
function gambar(a) {
if (a.files && a.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('gambar').src=e.target.result;
}
reader.readAsDataURL(a.files[0]);
}
}
</script>
var tm_pilih = document.getElementById('pilih');
var file = document.getElementById('file');
tm_pilih.addEventListener('click', function () {
file.click();
})
file.addEventListener('change', function () {
gambar(this);
})
function gambar(a) {
if (a.files && a.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('gambar').src=e.target.result;
}
reader.readAsDataURL(a.files[0]);
}
}
</script>
function gambar() menginstruksikan untuk mengecek apakah ada file yang dipilih user, jika ada maka buat object FileReader (). File reader berfungsi untuk membaca file atau gambar yang telah dipilih untuk selanjutnya memasukkan gambar tersebut kedalam src dari element img.
Silahkan jalankan di browser anda dan lihat hasilnya.
Aziz Blogger October 05, 2019 Admin Bandung Indonesia
Menampilkan Gambar Sebelum di Upload dengan Javascript
Tentunya anda sudah sering melihat web form pendaftaran dimana terdapat sesi upload foto. Sebelum mengupload foto ke server, biasanya gambar dapat dilihat...
Kali ini kita akan membuat sebuah tampilan website sosial media yaitu facebook. Tampilan yang akan dibuat adalah tampilan pertama yang akan muncul ketika membuka facebook (tampilan login dan daftar). Dalam pembuatan kali ini bahasa pemrograman web yang digunakan adalah HTML, dan CSS. Tampilan akhirnya akan tampak seperti berikut :
Berikut adalah kode dalam file utama "index.html" dan "css.css".
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Tampilan Login seperti Facebook</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<link id="favicon" rel="shortcut icon" type="image/png" href="asset/icon/icon.png">
</head>
<body >
<div class="atas">
<div class="bungkus">
<div class="kiri">
<h3>codingrakitan</h3>
</div>
<div class="kanan">
<div class="user">
<div class="judul">
Email atau Telepon
</div>
<div class="input">
<input type="text" name="username">
</div>
</div>
<div class="user" style="margin-right: 2px;">
<div class="judul">
Kata Sandi
</div>
<div class="input">
<input type="password" name="password">
</div>
<div class="lupa">
<a href="#">Lupa akun?</a>
</div>
</div>
<div class="user" >
<div class="judul" style="color: transparent;">
|
</div>
<div class="input">
<button>Masuk</button>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="bc">
<div class="kr">
<div class="jd">
Codingrakitan.blogspot.com membantu anda dalam belajar pemrograman android, hingga web.
</div>
<div class="gm">
<img src="asset/icon/bc.png">
</div>
</div>
<div class="kn">
<div class="at">
<h2>Daftar</h2>
<a>Gratis, sampai kapan pun.</a>
</div>
<div class="it" style="display: flex;margin-top: 20px;">
<div class="it1" style="margin-right: 7px;">
<input type="text" name="nd" placeholder="Nama depan">
</div>
<div class="it1">
<input type="text" name="nb" placeholder="Nama belakang">
</div>
</div>
<div class="it">
<div class="it1">
<input type="text" name="nr" placeholder="Nomor seluler atau email">
</div>
</div>
<div class="it">
<div class="it1">
<input type="text" name="kt" placeholder="Kata sandi baru">
</div>
</div>
<div class="it" style="margin-top: 30px;">
<div class="jd2">
<h5>Tanggal Lahir</h5>
</div>
</div>
<div class="it" style="display: flex;">
<div class="sl">
<select>
<option>Tanggal</option>
</select>
</div>
<div class="sl">
<select>
<option>Bulan</option>
</select>
</div>
<div class="sl">
<select>
<option>Tahun</option>
</select>
</div>
</div>
<div class="it">
<div class="jd2">
<h5>Jenis Kelamin</h5>
</div>
</div>
<div class="it" style="display: flex;margin-bottom: 20px;">
<div class="rd">
<input type="radio" name="jk">
Perempuan
</div>
<div class="rd">
<input type="radio" name="jk">
Laki-laki
</div>
<div class="rd">
<input type="radio" name="jk">
Khusus
</div>
</div>
<div class="it">
<p>Dengan mengklik Daftar, Anda menyetujui Ketentuan, Kebijakan Data dan Kebijakan Cookie kami. Anda akan menerima Notifikasi SMS dari Facebook dan dapat menolaknya kapan saja.</p>
</div>
<div class="it">
<button>Daftar</button>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Cara Membuat Tampilan Login seperti Facebook</title>
<link rel="stylesheet" type="text/css" href="asset/css/css.css">
<link id="favicon" rel="shortcut icon" type="image/png" href="asset/icon/icon.png">
</head>
<body >
<div class="atas">
<div class="bungkus">
<div class="kiri">
<h3>codingrakitan</h3>
</div>
<div class="kanan">
<div class="user">
<div class="judul">
Email atau Telepon
</div>
<div class="input">
<input type="text" name="username">
</div>
</div>
<div class="user" style="margin-right: 2px;">
<div class="judul">
Kata Sandi
</div>
<div class="input">
<input type="password" name="password">
</div>
<div class="lupa">
<a href="#">Lupa akun?</a>
</div>
</div>
<div class="user" >
<div class="judul" style="color: transparent;">
|
</div>
<div class="input">
<button>Masuk</button>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="bc">
<div class="kr">
<div class="jd">
Codingrakitan.blogspot.com membantu anda dalam belajar pemrograman android, hingga web.
</div>
<div class="gm">
<img src="asset/icon/bc.png">
</div>
</div>
<div class="kn">
<div class="at">
<h2>Daftar</h2>
<a>Gratis, sampai kapan pun.</a>
</div>
<div class="it" style="display: flex;margin-top: 20px;">
<div class="it1" style="margin-right: 7px;">
<input type="text" name="nd" placeholder="Nama depan">
</div>
<div class="it1">
<input type="text" name="nb" placeholder="Nama belakang">
</div>
</div>
<div class="it">
<div class="it1">
<input type="text" name="nr" placeholder="Nomor seluler atau email">
</div>
</div>
<div class="it">
<div class="it1">
<input type="text" name="kt" placeholder="Kata sandi baru">
</div>
</div>
<div class="it" style="margin-top: 30px;">
<div class="jd2">
<h5>Tanggal Lahir</h5>
</div>
</div>
<div class="it" style="display: flex;">
<div class="sl">
<select>
<option>Tanggal</option>
</select>
</div>
<div class="sl">
<select>
<option>Bulan</option>
</select>
</div>
<div class="sl">
<select>
<option>Tahun</option>
</select>
</div>
</div>
<div class="it">
<div class="jd2">
<h5>Jenis Kelamin</h5>
</div>
</div>
<div class="it" style="display: flex;margin-bottom: 20px;">
<div class="rd">
<input type="radio" name="jk">
Perempuan
</div>
<div class="rd">
<input type="radio" name="jk">
Laki-laki
</div>
<div class="rd">
<input type="radio" name="jk">
Khusus
</div>
</div>
<div class="it">
<p>Dengan mengklik Daftar, Anda menyetujui Ketentuan, Kebijakan Data dan Kebijakan Cookie kami. Anda akan menerima Notifikasi SMS dari Facebook dan dapat menolaknya kapan saja.</p>
</div>
<div class="it">
<button>Daftar</button>
</div>
</div>
</div>
</div>
</body>
</html>
css.css
body{
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
background: #d3dbda;
}.atas{
width: 100%;
height: 80px;
background:#983b45;
}.bungkus{
width: 73%;
height: 100%;
margin: auto;
display: flex;
font-family: Helvetica, Arial, sans-serif;
}.kiri{
width: 59%;
height: 100%;
}.kiri h3{
margin: 0px;
margin-top: 20px;
color: white;
font-size: 30px;
}.kanan{
height: 100%;
}.user{
float: left;
padding: 10px;
font-size: 12px;
padding-top: 15px;
}.judul{
margin-bottom: 5px;
color: white;
}.input input{
padding: 2px;
border:1px solid #1d2a5b;
}.lupa a{
text-decoration: none;
color: #8fb4cc;
}.lupa{
margin-top: 5px;
}.input button{
background: #b24242;
border: 1px solid #7d2929;
padding: 3px;
color: white;
padding-left: 5px;
padding-right: 5px;
cursor: pointer;
}.content{
background: url(../icon/aa.png) 0 bottom repeat-x;
background: linear-gradient(white, #E8D3D3);
width: 100%;
padding-bottom: 200px;
}.bc{
margin: 0 auto;
width: 980px;
display: flex;
}.kr{
width: 565px;
}.kn{
width: 400px;
}.jd{
color: #0e385f;
font-size: 20px;
font-weight: bold;
line-height: 29px;
margin-top: 40px;
width: 450px;
word-spacing: -1px;
font-family: Helvetica, Arial, sans-serif;
}.it{
margin-top: 10px;
}.it1{
width: 100%;
background: white;
border-radius: 7px;
border: 1px solid #bdc7d8;
overflow: hidden;
}.it1 input{
font-size: 18px;
padding: 7px;
width: -moz-available;
border:unset;
}.at{
font-family: Helvetica, Arial, sans-serif;
}.at h2{
font-weight: 600;
color: #333;
margin-bottom: 5px;
font-size: 36px;
}.at a{
color: #1d2129;
font-size: 19px;
}.sl select{
border: 1px solid #ccd0d5;
font-size: 13px;
background-color: #fff;
color: #1c1e21;
height: 30px;
padding: 5px;
}.jd2 h5{
margin: unset;
color: #90949c;
}.jd2{
color: #0e385f;
font-size: 20px;
font-weight: bold;
width: 450px;
word-spacing: -1px;
font-family: Helvetica, Arial, sans-serif;
}.it button{
font-family: 'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
font-weight: bold !important;
font-size: 19px;
letter-spacing: normal;
text-rendering: optimizelegibility;
/*box-shadow: inset 0 1px 1px #a4e388;*/
border:1px solid;
border-color: #3b6e22 #3b6e22 #2c5115;
background: linear-gradient(#67ae55, #578843);
background-color: #69a74e;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
letter-spacing: 1px;
position: relative;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
min-width: 194px;
padding: 7px 20px;
text-align: center;
}.it p{
color: #777;
font-size: 11px;
width: 316px;
}.rd{
font-family: 'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
color: #1d2129;
font-size: 18px;
font-weight: normal;
line-height: 18px;
padding: 0 10px 0 3px;
}
margin: 0px;
height: 100%;
width: 100%;
position: absolute;
background: #d3dbda;
}.atas{
width: 100%;
height: 80px;
background:#983b45;
}.bungkus{
width: 73%;
height: 100%;
margin: auto;
display: flex;
font-family: Helvetica, Arial, sans-serif;
}.kiri{
width: 59%;
height: 100%;
}.kiri h3{
margin: 0px;
margin-top: 20px;
color: white;
font-size: 30px;
}.kanan{
height: 100%;
}.user{
float: left;
padding: 10px;
font-size: 12px;
padding-top: 15px;
}.judul{
margin-bottom: 5px;
color: white;
}.input input{
padding: 2px;
border:1px solid #1d2a5b;
}.lupa a{
text-decoration: none;
color: #8fb4cc;
}.lupa{
margin-top: 5px;
}.input button{
background: #b24242;
border: 1px solid #7d2929;
padding: 3px;
color: white;
padding-left: 5px;
padding-right: 5px;
cursor: pointer;
}.content{
background: url(../icon/aa.png) 0 bottom repeat-x;
background: linear-gradient(white, #E8D3D3);
width: 100%;
padding-bottom: 200px;
}.bc{
margin: 0 auto;
width: 980px;
display: flex;
}.kr{
width: 565px;
}.kn{
width: 400px;
}.jd{
color: #0e385f;
font-size: 20px;
font-weight: bold;
line-height: 29px;
margin-top: 40px;
width: 450px;
word-spacing: -1px;
font-family: Helvetica, Arial, sans-serif;
}.it{
margin-top: 10px;
}.it1{
width: 100%;
background: white;
border-radius: 7px;
border: 1px solid #bdc7d8;
overflow: hidden;
}.it1 input{
font-size: 18px;
padding: 7px;
width: -moz-available;
border:unset;
}.at{
font-family: Helvetica, Arial, sans-serif;
}.at h2{
font-weight: 600;
color: #333;
margin-bottom: 5px;
font-size: 36px;
}.at a{
color: #1d2129;
font-size: 19px;
}.sl select{
border: 1px solid #ccd0d5;
font-size: 13px;
background-color: #fff;
color: #1c1e21;
height: 30px;
padding: 5px;
}.jd2 h5{
margin: unset;
color: #90949c;
}.jd2{
color: #0e385f;
font-size: 20px;
font-weight: bold;
width: 450px;
word-spacing: -1px;
font-family: Helvetica, Arial, sans-serif;
}.it button{
font-family: 'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
font-weight: bold !important;
font-size: 19px;
letter-spacing: normal;
text-rendering: optimizelegibility;
/*box-shadow: inset 0 1px 1px #a4e388;*/
border:1px solid;
border-color: #3b6e22 #3b6e22 #2c5115;
background: linear-gradient(#67ae55, #578843);
background-color: #69a74e;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
letter-spacing: 1px;
position: relative;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
min-width: 194px;
padding: 7px 20px;
text-align: center;
}.it p{
color: #777;
font-size: 11px;
width: 316px;
}.rd{
font-family: 'Freight Sans Bold', Helvetica, Arial, sans-serif !important;
color: #1d2129;
font-size: 18px;
font-weight: normal;
line-height: 18px;
padding: 0 10px 0 3px;
}
Untuk melihat atau mendownload project lengkapnya silahkan klik disini
Aziz Blogger July 01, 2019 Admin Bandung Indonesia
Cara Membuat Tampilan Login seperti Facebook
Kali ini kita akan membuat sebuah tampilan website sosial media yaitu facebook. Tampilan yang akan dibuat adalah tampilan pertama yang akan muncul ketika...
QRCode merupakan sebuah code yang dibuat menjadi sebuah gambar, sehingga untuk membaca kode yang ada pada gambar tersebut dibutuhkan scan khusus QRCode. Teman-teman yang masih bingung apa itu QRCode bisa melihat contohnya pada gambar di bawah ini :
Pada gambar tersebut berisikan kata "codingrakitan.blogspot.com". Jika kalian hendak membuat kode QRCode anda bisa menggunakan bantuan library PHP yaitu PHPQRCode. Diakhir postingan saya akan memagikan hasil project yang telah dibuat beserta library PHPQRCode.
Untuk membuat sebuah QRCode dengan bantuan library ini anda perlu mendeklarasikan kode seperti :
buat_code.php
<?php
include 'include/phpqrcode/qrlib.php';
$tmp = "asset/gambar_kode/";
$isi = $_POST['isi'];
$kualitas = "H";
$ukuran = 10;
$padding = 2;
$nama = "nama_gambar".".png";
QRCode::png($isi, $tmp.$nama, $kualitas, $ukuran, $padding);
?>
include 'include/phpqrcode/qrlib.php';
$tmp = "asset/gambar_kode/";
$isi = $_POST['isi'];
$kualitas = "H";
$ukuran = 10;
$padding = 2;
$nama = "nama_gambar".".png";
QRCode::png($isi, $tmp.$nama, $kualitas, $ukuran, $padding);
?>
"QRCode::png($isi, $tmp.$nama, $kualitas, $ukuran, $padding);" kode ini berungsi untuk membuat gambar QRCode dengan ketentuan :
- $isi = isi dari kata yang akan dijadikan kode.
- $tmp = folder tempat kita menyimpan gambar qrcode.
- $nama = nama dari gambar yang akan disimpan harus di akhiri dengan extensi file seperti ".png".
- $kualitas = kualitas dari gambar qrcode yang akan dibuat, disini saya mengguanakan "H" yang berarti hight (kualitas tinggi).
- $ukuran = ukuran dari gambar qrcode yang akan disimpan disini saya mengguanakan ukuan 10.
- $padding = batas antara tepi gambar dengan gambar code yang berwarna hitam.
Aziz Blogger June 30, 2019 Admin Bandung Indonesia
Cara Membuat QRCode Mengunakan PHPQRCode
QRCode merupakan sebuah code yang dibuat menjadi sebuah gambar, sehingga untuk membaca kode yang ada pada gambar tersebut dibutuhkan scan khusus QRCode....
