AdityaDees: Web

Hot

https://publishers.chitika.com/

Contact us for advertising.
Showing posts with label Web. Show all posts
Showing posts with label Web. Show all posts

20 November 2019

Mengenal Apa itu Django dan Cara Penginstalannya - Coding Rakitan

22:41 0

Python merupakan salah satu bahasa pemrograman yang populer di kalangan para programer. Tidak hanya dapat digunakan untuk membangun aplikasi desktop, Python juga dapat digunakan untuk membangun aplikasi berbasis web. Salah satu framework website yang menggunakan bahasa python adalah Django.

Django adalah sebuah framework full-stack yaitu istilah yang berarti django meliputi sisi front-end dan juga back-end. Susunan tahapan yang harus anda lalui untuk dapat menggunakan framework django : Install python -> Install PIP -> Install Django.

Install Python

Agar dapat membangun web dengan framework django terlebih dahulu anda harus menginstall python. Anda dapat mendownload di halaman resminya disini. Setelah anda berhasil menginstall python, silahkan lakukan pengecekan untuk memastikan phyton sudah siap digunakan. Caranya buka Command Promt atau CMD lalu ketik "python --version", jika berhasil akan muncul informasi versi python seperti gambar dibawah.



Install PIP

Lanjut ke tahap penginstalan PIP yaitu sebuah pengolah package untuk python. PIP ini sama fungsinya seperti Composer untuk php atau NPM pada Node js. Pengolah package ini nantinya diperlukan untuk mendownload Django. Cara penginstalan PIP cukup mudah, silahkan download file get-pip.py, setelah itu buka cmd dan arahkan ke folder file get-pip.py berada. Selanjutnya ketik perintah "python get-pip.py" di cmd dan tunggu hingga proses instalasi selesai. Untuk dokumentasi lengkap penginstalan PIP dapat anda lihat disini.

Install Django

Tahap terakhir adalah menginstall Django cara sangat mudah anda tinggal buka CMD lalu ketik "pip install django" lalu tunggu hingga proses selesai. Untuk memastikan django telah terpasang, ketikkan perintah "django-admin --version" di CMD, jika muncul versi django seperti gambar di bawah maka selamat django anda siap digunakan.



Sekarang anda bisa memulai untuk membuat project dengan django. Untuk cara pembuatan project baru menggunakan django anda bisa melihatnya di Postingan : Cara Membuat Project Baru Django.

Read More

20 October 2019

Apa itu Data GET dan POST dalam Dunia WEB

22:55 0
Didalam dunia pemrograman WEB dikenal dua jenis data yang dapat dikirim dari client ke server. Kedua data tersebut adalah GET dan POST.

Perbedaan keduanya cukup mencolok. Jika data GET dikirim dengan mendeklarasikannya kedalam URL seperti "http://codingrakitan.blogspot.com/?data=GET" sedangkan untuk data POST dapat dikirim dengan menggunakan TAG "<form action="url_aksi" method="POST"><input name="data_post" type="input" /></form> " dalam html.

Pengiriman data menggunakan POST inilah yang seringkali di jumpai pada halaman Login. Sedangkan data komunikasi GET biasanya digunakan untuk berpindah alamat.

Untuk mengambil data ini pada bagian server, juga berbeda-beda tergantung bahasa server yang digunakan. Pada PHP instruksi yang digunakan seperti berikut.

POST
 
$data = $_POST['data_post'];

GET
 
$data = $_GET['data'];



Sedangkan pada server menggunakan Node js dengan Express seperti berikut.
POST
 
app.post('url', function (req, res){
var data = req.body.data_post;
})

GET
 
app.get('url', function (req, res){
var data = req.query.data;
})


Read More

17 October 2019

Mengenal Apa itu Front End Development, Back End Development, dan Full Stack Development

17:59 0

Bekerja di dunia pemrograman memang sangat menjanjikan. Tidak hanya karena banyaknya perusahaan yang membutuhkan jasa programer, akan tetapi seorang programer juga bisa membangun startup sendiri.

Sebagai seorang pemula dalam dunia pemrograman ada baiknya anda mengetahui 3 jenis pembagian berdasarkan spesialisnya.

Apa saja itu ?

Tiga spesialis yang dimaksud tersebut adalah Front End Development, Back End Development, dan Full Stack Development. Anda bisa memilih spesialis mana yang ingin digeluti.

Front End Development

Front End Development merupakan sebutan bagi mereka yang spesialisnya membangun aplikasi bagian depan atau tampilan yang nantinya akan di lihat oleh User. Bagian ini sangat sensitif dikarenakan user sekarang ini kebanyakan menilai aplikasi dari tampilannya saja.

Semakin cantik tampilan depan maka semakin banyak pula pelanggan yang akan memakai aplikasi anda. Apalagi jika aplikasi yang dibuat ditujukan untuk konsumen yang tidak mengerti pemrograman.

Seorang Front End Development juga harus menguasai bahasa pemrograman. Contohnya dalam dunia pemrograman web, Front End Development harus bisa mengusai html (bahasa untuk membuat kerangka), css (untuk membuat tema tampilan), serta Javascript (untuk membuat tampilan makin hidup).

Back End Development

Back End Development adalah sebutan untuk mereka yang spesialis pada bagian belakang aplikasi. Bagian ini mungkin tidak bisa di nampakkan seperti Front End Development namun menjadi bagian utama untuk menjalankan aplikasi.

Contohnya sederhananya adalah ketika anda melakukan proses login kedalam halaman website, kita tidak akan melihat proses apa yang terjadi hingga kita bisa sampai pada halaman Profile. Di bagian belakang tersebut ada kode dari Back End Development yang menentukan apakah akun kita terdaftar atau tidak, serta mengambil data-data yang akan di tampilkan pada halaman profile.

Seorang Back End Development dalam pemrograman berbasis web harus mampu menguasai bahasa yang berjalan di sisi server contohnya PHP (Hypertext Preprocessor), Javascript. Selain itu mereka haru bisa menguasai database seperti MySQL, MariaDB, MongoDB, dll.

Perusahaan-perusahaan sekarang ini juga menuntut para Back End Development untuk mampu menguasai Framework, hal ini sudah menjadi standar di banyak perusahaan. Salah satu alasannya dikarenakan perkembangan Framework yang terus-menerus, serta unggul dalam segi keamanan.

Full Stack Development

Full Stack Development, dari namanya mungkin kita sudah tahu artinya. Full Stack Development merupakan istilah untuk meraka yang membangun aplikasi dari bagian depan (Front End Development) ataupun bagian belakang (Back End Development).

Jadi Full Stack Development ini bisa di katakan sebagai gabungan dari Front End Development dan Back End Development. Salah satu keuntungan menjadi Full Stack Development adalah anda dapat memabangun aplikasi sendiri tanpa bantuan tim meskipun ini tentunya akan lebih berat untuk sebagian orang.

Read More

10 October 2019

7 Framework PHP Terbaik dan Terpopuler versi Coding Rakitan

05:16 0

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.


Read More

07 October 2019

Mengenal dan Menginstall XAMPP

01:18 0


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
Memulai Membuat Project dengan XAMPP
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.
  • Kemudian edit file index.html tersebut dengan kode seperti dibawah.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Belajar XAMPP</title>
    </head>
    <body>
        <h1>Hello World !!</h1>
    </body>
    </html>

  • Buka browser internet anda seperti Mozilla atau Chrome. Ketikkan di alamt urlnya dengan localhost/belajar
     
  • Selamat belajar membuat aplikasi-aplikasi selanjutnya.
Read More

05 October 2019

Menampilkan Gambar Sebelum di Upload dengan Javascript

19:12 0

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;
}


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>


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>


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.

Read More

https://payclick.com/

Contact us for advertising.