7 Situs Terbaik untuk Belajar Koding Website(HTML, CSS & PHP)

Anda adalah seorang awam yang ingin belajar membuat website?. Jika ya, tepat sekali anda membaca posting ini. Saya berani berkata bahwa jika anda membaca sampai selesai dan mengikuti apa yang sarankan dibawah, dalam waktu dekat setidaknya anda akan mengerti dasar dari kode-kode yang digunakan untuk membuat website.

Ada banyak cara untuk belajar script-script untuk membuat website. Salah satunya adalah belajar di situs-situs yang menyediakan tutorial-tutorial dan praktek untuk membuat objek-objek di website. Belajar di situs-situs ini gratis, mudah dan tidak repot. Anda tidak harus mendatangkan guru untuk mengajari anda. Walaupun memang akan lebih baik jika ada pembimbing.

Berikut ini adalah 7 website terbaik yang dapat anda akses untuk belajar kode HTML, CSS dan PHP.

1. W3schools.com

Baca Selengkapnya

Mengenal Apa itu HTML(Hypertext Markup Language)

HTML(HyperText Markup Language) adalah bahasa markah/kode yang digunakan untuk menampilkan objek atau data di halaman web. HTML merupakan salah satu bahasa pemrograman client side dan digunakan untuk membuat web baik statis maupun dinamis. Dalam pembuatan web dinamis, HTML harus dilengkapi PHP yang merupakan script untuk mengolah datanya.

Baca Selengkapnya

Mengenal apa itu PHP (Hypertext PreProcessor)

PHP (Hypertext PreProcessor) adalah bahasa komputer/bahasa pemrograman/koding/script yang digunakan untuk mengolah data dari server untuk ditampilkan di website. Jadi, PHP digunakan untuk membuat website dinamis. Dalam penggunaan murninya, kode-kode PHP disisipkan diantara kode HTML. File yang berisi script php harus berformat .php.

Baca Selengkapnya

Apa itu Mockup/Wireframe (Website) ?

Dalam dunia website, Mockup/Wireframe adalah rancangan awal sebuah desain web yang dibuat secara manual menggunakan photoshop, atau software pengedit gambar lainnya. Mockup merupakan gambar model atau prototif halaman web secara full dan detail. Format mockup ini biasanya berbentuk file .PSD (Photoshop Document).

Baca Selengkapnya

7 Langkah Mengerjakan Project Website Pesanan dari Client

Jika anda adalah seorang web developer, apa yang anda lakukan saat baru pertama kali menerima project dari client?. Saya yakin, anda bingung. Kebanyakan dari programmer pemula hanya memikirkan bagaimana mengerjakannya secara teknis. Padahal, dalam menerima sebuah project, ada hal-hal yang bersifat non-teknis yang harus kita kuasai. Misalnya, seperti kemampuan bernegoisasi, kemampuan menggali informasi kebutuhan pelanggan, dan sebagainya.

Oleh karena itu, disini saya akan berbagi bagaimana langkah yang tepat bagi anda yang baru pertama kali menerima sebuah project. Mungkin sederhana, tapi ini sangat penting agar tidak terjadi hal yang tidak diinginkan saat mengerjakannya.

1. Menganalisa Tujuan dan Maksud dibuatnya website

Sebelum terjun ke hal teknis, anda perlu mengetahui tujuan dan maksud dibuatnya website yang akan anda kerjakan. Hal ini sangat penting agar tidak terjadi penyimpangan fungsi pada website. Misal, project yang anda terima adalah project dari sebuah perusahaan untuk mempromosikan dan memerlihatkan produk-produknya. Maka, fungsi web ini harus harus bersifat seperti katalog dan portofolio, bukan seperti blog.

2. Menganalisa Keinginan & Kebutuhan client

Poin ini sebenarnya sejalan dengan poin nomor satu. Namun, pada poin ini biasanya client meminta fitur-fitur khusus. Tentu saja, anda harus mempertimbangkannya. Tidak boleh asal setuju. Sarankan beberapa fitur yang mudah anda buat namun sangat bermanfaat nantinya. Pahami juga apa yang sebenarnya dibutuhkan, karena anda sebagai developer lebih mengerti daripada client anda.

3. Membuat Mockups

Setelah melewati langkah 1 dan 2, tentunya anda akan mengetahui fitur apa saja yang akan ada di website. Nah, buatlah tata letak, navigasi, dan tampilan sederhananya dengan photoshop. Buatlah sekitar 3 mockups sebagai pilihannya. Beberapa pelanggan, terkadang ingin dibuatkan tampilan websitenya secara detail di photoshop. Artinya, desain di photoshop = 100% desain di programnya. Jika seperti ini, anda perlu seorang web designer atau skill web design yang mumpuni.

4. Dealing Dengan Client

Setelah client memilih desain webnya, barulah bisa dealing dengan client anda. Pada tahap ini anda harus membuat perjanjian-perjanjian. Beberapa perjanjian yang harus anda buat diantaranya :
- Harga jika ada penambahan fitur
- Harga jika ada pengubahan desain
- Garansi maintenance
- Dan sebagainya

5. Mulai Mendesign Web Sesuai Mockups

Barulah, pada bagian kelima ini anda mulai terjun pada teknisnya. Mulailah mendesain webnya sesuai mockups. Usahakan secocok mungkin dengan mockups agar nantinya tidak ada komplain. Selain mendesain tampilan, anda juga harus memperhatikan struktur dan kerapihan koding html yang anda buat agar mudah diubah jika ada perubahan. Perhatikan juga struktur koding untuk SEO walaupun hanya sekedarnya agar memberi nilai lebih pada client.

6. Mulai mengerjakan program

Setelah desain-nya selesai semua, barulah mulai membuat programnya. Usahakan koding anda se-clean dan se-sedikit mungkin untuk mencegah terjadinya banyak bug. Jika anda tidak ingin terlalu ribet, tidak ada salahnya menggunakan framework atau CMS. Namun, dengan catatan tidak melanggar perjanjian dan tetap membuat puas pelanggan. Jika anda menggunakan framework atau CMS, anda juga harus memperhatikan keamanannya.

7. Beta Testing

Langkah terakhir adalah dengan melakukan percobaan pada program anda atau biasa disebut Beta Testing. Langkah ini berguna untuk menemukan error-error yang ada pada website, dan memperbaikinya. Website dibuat oleh manusia, jadi mustahil jika 100% sempurna. Jika websitenya memiliki banyak fitur, sebaiknya mintalah bantuan pada teman atau siapapun untuk mencoba mengakses dan menggunakannya. 

Itulah 7 langkah yang sebaiknya anda ikuti jika anda menerima sebuah project website. Insyaallah, pekerjaan anda akan efektif. 

Punya pendapat lain? jangan sungkan untuk menceritakannya juga di komentar. Jika menurut anda bermanfaat, setidaknya bagikanlah ke twitter/facebook atau berkomentar sebagai bentuk terima kasih ^_^.

~Muhammad Syakirurohman~

Baca Selengkapnya

10 Tips Mempercepat Loading Halaman Web Anda

Apa yang anda rasakan ketika anda membuka sebuah situs yang loadingnya sangat lama, padahal koneksi internet anda cepat?. Tentu saja bete bukan. Bahkan mungkin anda membatalkan untuk mengaksesnya. Cepat tidaknya sebuah website sangat mempengaruhi mood pengunjung saat mengaksesnya. Tidak hanya itu, kecepatan loading juga merupakan salah satu parameter untuk menentukan bagus tidaknya optimasi SEO sebuah website. Oleh karena itu, mempercepat loading situs web anda sangat penting untuk anda lakukan.

Baca Selengkapnya

Trik Membuat Expanding Search Bar dengan CSS & JQuery

Okay, kali ini saya akan berbagi tutorial untuk membuat Search bar dengan animasi yang jika disentuh (hover) akan melebar. Sebenarnya, ada beberapa tutorial sejenis yang lebih "wow", namun menurut saya sangat rumit untuk dimengerti. Nah, Saya disini membuatnya sendiri dengan script sesedikit mungkin agar mudah anda implementasikan sendiri di website anda.

Baca Selengkapnya

Cara Embed Spreadsheet Excel pada Halaman Web

Ketika kita menulis sebuah artikel, mempresentasikan data dalam sebuah form kadang-kadang menjadi hal yang penting. Hal ini akan berguna untuk merepresentasikan data statistik atau analisis. Saat ini, kebanyakan dari kita menggunakan software spreadsheet seperti Microsoft Office atau Google Docs untuk perhitungan data dan manipulasi, tetapi hanya menggunakan tabel atau bahkan gambar ketika mempresentasikan data secara online. Nah kali ini, saya akan menunjukkan bagaimana menyisipkan Lembar kerja Excel dan Google Spreadsheets pada sebuah halaman web.

Meng-Embed Lembar Kerja Excel

Microsoft Excel adalah salah satu software spreadsheet terbaik. Dan salah satu hal yang membuatnya lebih baik adalah anda bisa menggunakan versi online-nya dengan fitur lengkap di office.live.com. Jika Anda ingin menyisipkan sebuah lembar kerja excel, maka bukalah office.live.com, dan buatlah workbook kosong baru. Masukkan beberapa data di dalamnya. Anda juga dapat meng-copy-paste data dari file Excel anda ke dalamnya. Namun, perlu diingat bahwa anda harus mempunyai akunnya dulu untuk login.

Sekarang, buka File >> Share >> Embed >> Generate HTML.

Baca Selengkapnya

7 Framework PHP untuk Membuat Web dengan Mudah, Terstruktur & Aman

Hal penting dalam membuat sebuah project website adalah kemudahan dalam pembuatan dan penggunaan, struktural, serta keamanan program. Masalahnya, apakah anda mampu membuat ketiganya dalam program website anda?. Sering kali kita sebagai programmer lebih fokus pada salah satu atau dua dari ketiga hal penting diatas, sementara poin lain diabaikan. Memang, membutuhkan tenaga ekstra untuk bisa menciptakan ketiga poin diatas. Namun, itu hanya terjadi jika anda tidak cukup cerdas untuk memilih cara yang lebih mudah.

Ketahuilah, bahwa saat ini sudah banyak para programmer seperti anda yang membuat framework opensource/gratis untuk mengatasi tiga poin diatas dengan sangat mudah. Ada berbagai macam framework php opensource dengan keunggulannya masing-masing dan terus dikembangkan sampai saat ini. Jadi, mengapa tidak memanfaatkan salah satunya?

Jika anda belum mengerti istilah framework, sebaiknya anda baca dulu posting ini: Apa itu framework?

1. Yii

Yii adalah framework php gratis/opensource yang ditulis dalam PHP5 yang dikembangkan untuk aplikasi web 2.0.Saat ini, Yii adalah framework yang paling mudah dan lengkap fiturnya dibandingkan framework lain. Dengan kelengkapan fiturnya itu, Yii cocok untuk project kecil maupun besar. Yii membantu web programmer membangun aplikasi kompleks dengan efektif dan efisien.

Yii diucapkan sebagai Yee atau [ji:], dan merupakan singkatan da "Yes, it is!". Hal ini sering menjadi jawaban akurat untuk pertanyaan-pertanyaan yang dilontarkan pengguna baru : Apakah cepat? Apakah aman? Apakah profesional? Apakah akan cocok untuk proyek berikutnya? Yes, it is!

Untuk mendownload dan selengkapnya mengenai Yii, silahkan kunjungi websitenya www.yiiframework.com.

2. CodeIgniter

CodeIgniter adalah framework PHP yang cukup powerfull dengan footprint yang sangat kecil, dibangun untuk para web programmer yang membutuhkan toolkit sederhana namun elegan untuk membuat aplikasi web dengan fitur lengkap. Berbeda dengan Yii, CodeIgniter atau CI lebih sederhana karena diperuntukkan untuk web project ukuran kecil - menengah. 

Dari segi pengguna, CodeIgniter lebih banyak digunakan dan dikenal daripada framework lainnya. Saat ini, pengembangan CodeIgniter telah mencapai versi 2.1.4.

Untuk mendownload dan selengkapnya mengenai CodeIgniter, silahkan kunjungi websitenya http://ellislab.com/codeigniter.

3. Symfony

Framework Symfony adalah framework opensource yang mulai dikembangkan sejak 12 tahun yang lalu dan 

dirilis pada tahun 2005. Symfony dikembangkan oleh perusahaan SensioLabs. Beberapa kelebihan symfony adalah cepat, fleksibelitas tidak terbatas(mudah diadaptasikan), Mudah dikembangkan dan diperluas, serta mudah untuk digunakan.

Dengan pengembang SensioLabs yang memang sudah cukup berpengalaman dalam bidang ini, Symfony cukup powerfull untuk anda gunakan pada project website anda. Silahkan kunjungi websitenya http://symfony.com/ untuk download dan silahkan coba untuk mengetahuinya lebih lanjut.

4. Zend Framework

Zend Framework 2 adalah Framework php open source untuk mengembangkan aplikasi web dengan menggunakan PHP 5.3+. Zend Framework 2 menggunakan kode berorientasi obyek (Object Oriented) 100% dan menggunakan sebagian besar fitur baru dari PHP 5.3, yaitu namespace, fungsi lambda dan closures. Zend Framework 2 berevolusi dari Zend Framework 1, Framework PHP yang sukses dengan lebih dari 15 juta download.

Struktur komponen Zend Framework 2 unik. Masing-masing komponen dirancang dengan beberapa ketergantungan pada komponen lainnya. ZF2 mengikuti prinsip desain object oriented SOLID. Arsitektur yang longgar ini memungkinkan pengembang untuk menggunakan komponen mana yang mereka inginkan. Ini biasa disebut "Use-at-will".

Untuk Download dan selengkapnya mengenai Zend Framework, silahkan kunjungi http://framework.zend.com/

5. Laravel

Laravel adalah framework aplikasi web dengan sintaks yang ekspresif dan elegan. Pengembangnya percaya bahwa pengerjaan sebuah project harus menjadi pengalaman kreatif, menyenangkan dan memuaskan. Laravel mencoba menghilangkan rasa bosan dalam programming dengan mengurangi tugas-tugas umum yang digunakan dalam sebagian besar proyek-proyek web, seperti otentikasi, routing, sesi, dan caching. 

Laravel bertujuan untuk membuat proses programming yang menyenangkan bagi pengembang tanpa mengorbankan fungsionalitas aplikasi. Untuk tujuan ini, pengembang telah mencoba untuk menggabungkan yang terbaik dari apa yang telah mereka lihat dalam kerangka web lain, termasuk kerangka yang diimplementasikan dalam bahasa lain, seperti Ruby on Rails, ASP.NET MVC, dan Sinatra. 

Silahkan kunjungi http://laravel.com/ untuk mendownload dan mempelajarinya lebih lanjut.

6. CakePHP

CakePHP adalah framework php opensource yang dibuat sebagi struktur pondasi bagi programer untuk membuat aplikasi web. CakePHP memungkinkan Anda untuk bekerja dengan cara cepat dan terstruktur -tanpa kehilangan fleksibilitas.

CakePHP membuang proses monoton dalam pengembangan web. CakePHP juga menyediakan semua tools yang anda butuhkan untuk memulai coding, misalnya : logika khusus untuk aplikasi anda. CakePHP memiliki tim pengembang dan komunitas yang aktif sehingga membawa nilai tambah ke proyek anda.

Untuk mendownloadnya, silahkan kunjungi cakephp.org

7. FuelPHP

Framework ini dimulai pada akhir tahun 2010 oleh Dan Horrigan. Kemudian tak lama setelah itu, Dan Horrigan menyertakan Phil Sturgeon, Jelmer Schreuder, Harro Verton dan Frank de Jonge. Pada 2013, Steve west bergabung dengan tim. Tim ini telah puluhan tahun berpengalaman dengan PHP dan semuanya telah terlibat dengan framework opensource lain seperti CodeIgniter dan lain-lain.

FuelPHP mengambil pendekatan yang berbeda dari framework lain dan berusaha untuk menjadi berbasis masyarakat. FuelPHP baru berdiri selama 3 tahun dan telah memiliki lebih dari 300 pengembang yang berkomitmen pada source code dan bahkan ada yang membantu dalam dokumentasi.

Pengembangnya percaya bahwa siapa saja yang menggunakan framework ini, ada dalam posisi yang sama untuk menemukan bug, memperbaikinya dan mengirim permintaan memperbaiki bug dan fitur baru. Tidak ada "kita vs mereka" (pengembang vs pengguna) untuk komunitas ini. Hanya ada sekelompok pengembang yang berbagi tools dan bersama-sama meningkatkannya lebih baik lagi. 

Untuk mendownloadnya, silahkan kunjungi http://fuelphp.com/

Itulah 7 framework php yang saya rekomendasikan untuk anda pakai. Anda bisa mempelajarinya dari dokumentasinya masing-masing. Semoga Bermanfaat.

~Muhammad Syakirurohman~

Baca Selengkapnya

Cara menampilkan File Ebook .pdf di Halaman Web

Setelah beberapa hari saya mencari cara untuk memasang atau menampilkan file .pdf di web, akhirnya ketemu juga. Saya kira awalnya harus memakai plugin jquery tambahan. Namun, ternyata hanya dengan sebaris tag kode html pun kita sudah bisa menampilkan sebuah ebook .pdf di halaman web :). Tentu saja, untuk bisa menampilkan file .pdf, sebelumnya anda harus memastikan bahwa di komputer ana sudah terinstall pdf reader seperti Adobe Reader dan Foxit Reader.

1. Cara Pertama

Cara ini adalah dengan menampilkan ebook .pdf sebagai 1 halaman web penuh. Artinya tidak dalam elemen web lainnya. Caranya tinggal ketikkan letak url file .pdf itu di address bar, atau melalui klik link seperti dibawah :

<a href="http://www.syakirurohman.net/files/cerita.pdf" target="blank">Cerita.pdf</a>



2. Cara Kedua

Cara ini adalah dengan menampilkan ebook .pdf dalam sebuah halaman web sebagai elemen sisipan dan berdampingan dengan elemen atau markup web lainnya. Caranya dengan menggunakan tag html <embed> seperti dibawah ini.

<embed src="http://www.syakirurohman.net/files/cerita.pdf" type="application/pdf" width="500" height="700"/>

Kode berwarna merah adalah letak dari sebuah file .pdf, sedangkan kode warna hijau adalah pengaturan untuk lebar(width) dan tinggi(height) elemen yang menampilkan ebook .pdf-nya.

Nah, selamat mencoba. Semoga bermanfaat.

~Muhammad Syakirurohman~

Baca Selengkapnya

Mengenal Elemen & Komponen yang Ada Pada Blog/Website

Sebagai seorang pengguna internet, blogger atau bahkan web developer kita harus mengenal dan mengetahui elemen atau hal-hal yang ada pada sebuah website. Sebab, bagaimanapun, setiap kita terkoneksi internet dan menggunakannya kita tidak akan terlepas dari sebuah aplikasi bernama "Web". Oleh karena itu, bahkan untuk anda yang masih sangat awam, artikel ini harus anda baca karena merupakan sebuah pengenalan penting yang sederhana dan lugas mengenai komponen dan elemen yang sering "tertempel" pada sebuah website maupun blog.

Sebuah website tersusun dari komponen dan elemen dengan fungsinya masing-masing, lalu terkumpul dan saling berkaitan. Mungkin tanpa anda sadari, saat membaca artikel ini juga sebenarnya anda sedang menggunakan fungsi dari elemen-elemen itu. Nah, untuk mengenalinya lebih jauh, berikut ini adalah daftar elemen website yang umumnya tertampil.

Komponen Dasar

1. Title

Title adalah judul atau nama dari sebuah halaman web. Letaknya di titlebar browser.

2. Nama Domain

Nama domain adalah nama alias dari sebuah website. Sebenarnya, nama asli dari setiap website itu berupa IP address yang berupa nomor acak yang unik. Nama domain disewa dari pencatat/registrar domain per tahun. Domain digunakan agar manusia mudah untuk mengingat nama sebuah website. Kadangkala nama domain juga mewakili nama sendiri, nama brand, produk maupun perusahaan.

Contoh nama domain adalah www.syakirurohman.net yang merupakan nama domain blog ini.

3. Alamat URL

URL singkatan dari Uniform Resource Locator. Jika sebuah halaman web kita diibaratkan dengan rumah, maka URL ini adalah alamat lengkap rumah kita. Letaknya ada di addressbar browser. Setiap Halaman web memiliki url yang unik dan berbeda. Format URL bermacam-macam. Namun, semuanya selalu diawali dengan nama domain website atau blog tersebut.

4. Link/tautan

Jika kita ibaratkan lagi bahwa sebuah halaman web adalah rumah, maka link atau tautan ini adalah pintu/gerbang/lorong yang menuju ke halaman lain baik itu yang masih satu web maupun halaman di web yang berbeda.
Contoh Link :

Ini adalah link untuk kehalaman utama(syakirurohman.net), silahkan klik

Pengarahan link diatur dalam kode html <a href="alamat url halaman website tujuan">Anchor teks/ Teks yang dilink</a>.

5. Header

Header adalah bagian atas dari sebuah website. Biasanya berisi nama situs, logo dan deskripsinya. Header berfungsi untuk menampilkan identitas utama dari sebuah situs.
Contoh Header :

6. Konten/Isi

Konten atau isi sebuah situs berupa informasi dan artikel yang biasanya terletak dibagian tengah. Artikel yang sedang anda baca ini juga adalah bagian dari konten. Konten adalah bagian terpenting dari sebuah blog maupun website. Konten di halaman utama sebuah blog biasanya adalah daftar posting seperti pada gambar.

Elemen yang sering ada di sebuah Blog/Website

7. Sidebar

Sidebar adalah bagian sisi kanan maupun kiri sebuah website dan terletak di sisi konten. Sidebar biasanya berisi informasi tambahan dan navigasi dari sebuah website. Sidebar diisi dengan widget-widget. Misalnya, di blog ini ada 2 sidebar yaitu sidebar kiri yang berisi widget kategori dan sidebar kanan yang berisi widget media sosial dan popular posts.

Keberadaan sidebar ini bersifat opsional sesuai keinginan dan desain blog/web masing-masing. Ada blog yang hanya satu kolom(tanpa sidebar), ada yang hanya satu di sebelah kanan ataupun kiri, dan ada juga yang dikedua sisi memiliki sidebar seperti blog ini.

8. Widget

Setelah membaca nomor 7, anda pasti sudah tahu sedikit gambaran tentang widget. Yaa, widget adalah sebuah daerah pada website yang isinya berupa informasi tertentu dan memiliki fungsi tertentu pula. Widget tidak harus terletak pada bagian sidebar. Widget juga bisa terletak pada bagian atas posting, footer bahkan header (walaupun sangat jarang).

Contoh widget :

9. Footer

Footer adalah bagian dasar atau paling bawah dari sebuah website. Fungsi utamanya adalah sebagai kaki dan berisi informasi hak cipta, kepemilikan, link tambahan, sumber daya, sponsor dan kredit sebuah website. Namun, kadang-kadang footer juga bisa dijadikan sebagai tempat untuk menampilkan widget.

Contoh Footer :

10. Navbar

Navbar adalah kependekan dari Navigation bar. Navbar merupakan bagian website yang biasanya terletak di bagian paling atas dan bersifat melayang/fixed (Selalu terlihat walaupun di scroll). Navbar berfungsi untuk mempermudah navigasi sebuah situs. Biasanya berisi link-link penting yang mungkin dikunjungi dalam situs itu.

Contoh Navbar :

11. Menu

Menu adalah bagian dari website yang berisi link-link utama yang mengarah pada halaman tertentu di sebuah website. Secara fungsi hampir sama dengan navbar yaitu untuk mempermudah navigasi di web. Namun, teknisnya sedikit berbeda karena biasanya menu tidak melayang. Menu biasanya terletak di bawah atau di atas header.

Contoh Menu :

12. Breadcrumb

Breadcrumb merupakan sebuah elemen website berbentuk memanjang yang isinya adalah informasi tentang letak, posisi dan atau jalur halaman yang sedang dikunjungi dalam website itu. Breadcrumb biasanya hanya ada di halaman spesifik/single seperti halaman posting dan sejenisnya. Biasanya terletak di atas judul posting. Format breadcrumb biasanya adalah "Beranda > Kategori Posting > Nama/judul Posting".

Contoh BreadCrumb :

13. Form

Form dalam bahasa indonesia disebut formulir. Yaa, sebagaimana formulir kertas, form pada website juga berfungsi untuk penginputan data dari pengakses website baik itu yang bersifat wajib maupun opsional. Form pada website memiliki berbagai cara input seperti Textfield, Password, ComboBox, Textarea, Radio, Checkbox, Button dan lain-lain. 

Contoh form yang digunakan pada blog ini adalah form pencarian (pojok kanan atas) dan form kontak (di halaman kontak).

14. Sharing button bar (Bar tombol berbagi)

Sharing button bar adalah tempat dimana berbagai jenis tombol berbagi ke media sosial berada. Tombol berbagi ini berfungsi untuk membagikan posting ataupun isi pada halaman yang dikunjungi ke media sosial pengunjung. Tombol yang paling sering ada adalah tombol like facebook, tweet Twitter, dan +1 Google+.

Contoh Sharing button bar :

15. Popup

Popup adalah sebuah elemen pada website yang sifatnya hanya akan muncul/ada jika dikliknya sebuah tombol atau link tertentu pada website. Popup adalah sebuah jendela yang berisi informasi tertentu yang ingin disampaikan oleh pemilik situs. Ketika sebuah link popup klik, maka akan muncul jendela popup dan elemen lain di halaman website itu tidak akan berfungsi sebelum popup itu ditutup lagi. Ketika sebuah jendela popup muncul, biasanya elemen lain di halaman situs itu tertutupi warna hitam transparan.

Contoh Popup :

Itulah 15 elemen website yang biasanya ada pada sebuah website. Jika anda masih kurang jelas, anda bisa tanyakan di komentar. Atau, mungkin anda punya pendapat dan tambahan lain ? jangan sungkan untuk berbagi. Semoga bermanfaat :)

~Muhammad Syakirurohman~

Baca Selengkapnya

7 Source Code Editor Gratis untuk Memudahkan Anda Membuat Web

Jika anda menjadi seorang programmer, anda tidak akan terlepas dari yang namanya software & tool (Alat) untuk membantu anda bekerja. Sama seperti tukang bangunan yang membutuhkan palu, paku, sekop dan lain-lain untuk membangun rumah. Tanpa menggunakan alat-alat itu, apakah sebuah bangunan akan selesai ?.
Begitu pula dengan web programmer. Ketika mengerjakan sebuah proyek website, Seorang web developer membutuhkan banyak bantuan software dan tool agar bekerja lebih mudah, efektif dan efisien. Nah, salah satu jenis software yang dibutuhkan seorang web programmer adalah Source Code editor, yaitu software untuk memudahkan anda mengotak-ngatik kode yang membingungkan. Berikut ini adalah software-software pilihan yang saya rekomendasikan.

1.  Notepad++

Notepad++ adalah evolusi dari editor teks notepad biasa yang sudah ada sebagai software bawaan di OS microsoft windows. Notepad++ dikhususkan sebagai software untuk membantu para programmer dalam mengedit kode dengan membedakan kode-kode tertentu dengan warna. Sofware pengedit kode ini mendukung lebih dari 50 bahasa pemrograman yang ada. Silahkan [klik disini] untuk mendownload softwarenya.

2.  Sublime Text

Sublime Text adalah software pengedit skrip yang –menurut saya- paling user friendly, maksudnya mudah digunakan dan membuat anda sangat nyaman ketika mengedit kode. Di Sublime Text, anda juga bisa memilih tema editor dan warna-warna untuk suatu jenis kode/bahasa agar tidak jenuh. Anda juga bisa mengatur agar hanya file dalam sebuah folder saja yang ditampilkan di sidebar untuk diedit. Siapapun akan suka ketika bekerja dengan Sublime Text. Kelemahannya, Sublime Text tidak mendukung bahasa pemrograman sebanyak Notepad++. Untuk Mendownloadnya, silahkan kunjungi situs http://www.sublimetext.com.

3. Adobe Dreamweaver

Dari segi fitur dan fasilitas, Adobe Dreamweaver lebih lengkap dari semua editor yang saya tulis disini. Adobe Dreamweaver adalah sebuah software milik Adobe yang memang dikhususkan untuk membuat website. Bahkan, dengan software ini anda bisa mendesain sebuah website tanpa harus menyentuh kode HTML dan CSS. Dreamweaver membedakan kode dengan warna-warna terang. Dreamweaver juga mendukung sangat banyak bahasa pemrograman, lebih banyak dari notepad++.
Sebenarnya, Adobe Dreamweaver tidak bisa disebut hanya sekedar editor kode. Adobe Dreamweaver lebih cocok jika kita sebut sebagai software website builder (Software pembuat website). Namun, karena kelengkapan fasilitas itulah, software ini menjadi berat. Tidak cocok untuk komputer dengan spek Processor dan RAM atau memori yang kecil.
Sebenarnya Adobe Dreamweaver tidak digratiskan, tapi sudah ada banyak sekali crack-annya yang tersebar. Silahkan [klik disini]. Jika tidak bisa, silahkan cari di google dengan keyword “Adobe Dreamweaver with full crack”

4. Komodo Edit

Komodo edit adalah software pengedit kode yang mendukung berbagai bahasa pemrograman seperti PHP, Python, Ruby, JavaScript, Perl, Tcl, XML, HTML 5 dan CSS 3. Komodo edit juga dilengkapi dengan pewarnaan tiap kode yang bisa dirubah-rubah, pengecekan latar belakang kode, dan auto-complete. Komodo edit juga menyediakan versi berbayar untuk fitur yang lebih lengkap. Silahkan [klik disini] untuk download.

5.  KompoZer

KompoZer adalah Software pengedit kode yang diberdayakan oleh Mozilla. KompoZer merupakan sebuah sistem autorisasi web lengkap yang menggabungkan manajemen file web dan pengedit halaman web WYSIWYG yang mudah digunakan. KompoZer juga diarahkan untuk pengguna non-teknis yang kurang ahli dalam HTML dan kode web lainnya.
Walaupun tidak selengkap Adobe Dreamweaver, Software ini juga menyediakan fitur mendesain sebuah halaman web secara otomatis. KompoZer mendukung 21 bahasa pemrograman, integrasi manajemen file via FTP, tab pengeditan, Color picker dan dukungan untuk form, table dan template.
Silahkan Klik KompoZer Source Code Editor untuk mendownloadnya.

6.  JEdit

Pengedit kode yang satu ini lebih dikhususkan untuk para programmer yang sudah mapan, alias sudah cukup ahli. Kurang cocok untuk pemula. JEdit menghighlight sampai 130 bahasa pemrograman. JEdit juga menyediakan fitur yang memungkinkan anda mengkostumisasi tampilan toolbar dan statusbar sesuka hati anda.
Anda juga bisa copy dan paste kode dengan clipboard yang tak terbatas. Untuk mendownloadnya silahkan kunjungi http://www.jedit.org/.

 

7.  TouchCode

TouchCode adalah pengedit kode pemrograman yang dikhususkan untuk smartphone. Pengedit kode ini memungkinkan anda bekerja sebagai web programmer kapanpun dan dimanapun. Sekarang, TouchCode baru tersedia hanya untuk Android. Untuk tingkat smartphone editor, TouchCode mempunyai Fitur-fitur keren seperti Highlighting kode, kemampuan untuk menjalankan skrip, integrasi sebuah akun FTP, sinkronisasi file, dan masih banyak lagi.
Untuk mendownloadnya silahkan kunjungi http://www.touchqode.com/.

 

Itulah alat-alat yang bisa anda gunakan untuk mengedit kode pemrograman, terutama pemrograman web. Selain yang terakhir, Semuanya insyaalah cocok di OS manapun karena sebelum saya tulis, saya cek dulu compability-nya. Silahkan pilih yang lebih anda sukai. Saya pribadi lebih senang menggunakan Sublime Text karena lebih ramah pengguna. Bila anda masih seorang pemula web programmer, saya sarankan untuk menggunakan Adobe Dreamweaver karena fasilitasnya yang lengkap akan sangat membantu anda.
Namun, jika ingin yang lebih cocok dan klop dengan anda, silahkan coba satu persatu. Semoga bermanfaat :)

~Muhammad Syakirurohman~

Baca Selengkapnya

Portofolio : Web Sistem Perpus

Artikel ini cuma sekedar share aja tentang portofolio tugas saya waktu masih kelas XI semester 2 kemarin. Ini adalah tugas akhir atau proyek akhir semester. Ngerjainnya lumayan lama, sekitar 2 mingguan full walaupun hasilnya juga sangat memuaskan.

ini linknya : http://syakirurohman.id1945.com/web_sistem_perpus/

Keunggulan (baca: keribetan) dai website ini ada di halaman member dan backoffice/adminnya. Didalamnya ada sistem peminjaman, update foto member, print dengan TCPDF, dan 3 level user. kalo dari depan emang simpel. website ini di bangun dengan menggunakan kode PHP biasa/konvensional. Jadi, wajar kalo keamnannya juga mudah dibobol.

Baca Selengkapnya