Recent Comments


Thursday, October 31, 2013

Tutorial Membuat Website Company Profile by Great Work

Dikesempatan kali ini saya berhasil membuat tutorial membuat web company profile yang bersifat dinamis. Pada tutorial ini dibagi menjadi beberapa bagian, untuk saat ini sudah ada 20 video tutorial. Untuk durasi juga tidak sebentar karena saya berusaha untuk menjelaskan sedetail mungkin sesuai kemampuan.

#Complete Video Tutorial - Release Date 24 Maret 2014#

Aplikasi yang saya gunakan dalam tutorial sebagai berikut :
Sebelum mengikuti video tutorial dibawah, silahkan baca deskripsi yang ada pada youtube. Karena disana ada beberapa materi kode dan penjelasan singkat pada setiap video tutorial.

Berikut daftar video tutorialnya :
  1. Tutorial Membuat Website Company Profile - Bagian 1 (Desain Web Dengan Photoshop CS 6)
  2. Tutorial Membuat Website Company Profile - Bagian 2 (Coding Desain Responsive Header & Navigasi)
  3. Tutorial Membuat Website Company Profile - Bagian 3 (Desain Tampilan Slideshow dan Pembuatan Plugin Slideshow jQuery)
  4. Tutorial Membuat Website Company Profile - Bagian 4 (Menu Navigasi Kategori Produk)
  5. Tutorial Membuat Website Company Profile - Bagian 5 (Menu Tampilan Konten Produk)
  6. Tutorial Membuat Website Company Profile - Bagian 6 (Responsive Paging)
  7. Tutorial Membuat Website Company Profile - Bagian 7 (Responsive Footer)
  8. Tutorial Membuat Website Company Profile - Bagian 8 (Perbaikan Responsive Desain)
  9. Tutorial Membuat Website Company Profile - Bagian 9 (Penjelasan Responsive Desain Untuk Halaman Admin / Backend)
  10. Tutorial Membuat Website Company Profile - Bagian 10 (Pembagian Halaman Frontend Dengan PHP)
  11. Tutorial Membuat Website Company Profile - Bagian 11 (Menyelesaikan Desain Koding Frontend)
  12. Tutorial Membuat Website Company Profile - Bagian 12 (Penjelasan Desain Backend Per Halaman)
  13. Tutorial Membuat Website Company Profile - Bagian 13 (Pembuatan Database)
  14. Tutorial Membuat Website Company Profile - Bagian 14 (Koneksi PHP MySql dan Input Data Produk)
  15. Tutorial Membuat Website Company Profile - Bagian 15 (Sistem Command Produk Backend)
  16. Tutorial Membuat Website Company Profile - Bagian 16 (Menu Produk Backend dan Filtering Data)
  17. Tutorial Membuat Website Company Profile - Bagian 17 (Penyelesaian Backend)
  18. Tutorial Membuat Website Company Profile - Bagian 18 (Penyelesaian Frontend)
  19. Tutorial Membuat Website Company Profile - Bagian 19 (Implementasi .htaccess)
  20. Tutorial Membuat Website Company Profile - Bagian 20 (Hosting Online dan Domain Gratis .tk)
Tutorial ini saya bagikan GRATIS!! tetapi saya membutuhkan kritik atau saran dalam segi apapun dari kalian (kalau perlu, yg pedas2 juga boleh :D ). Silahkan tinggalkan kritik atau saran melalui komentar di bawah atau facebook atau juga bisa fanspage Great Work.

Bagi yang kesulitan download video, bisa menggunakan fitur dari indowebster untuk lokalkan videonya :) http://vd.indowebster.com
Atau juga bisa download videonya disini http://en.savefrom.net/ dengan cara paste link video youtube.  



Update Special Birthday 24 Maret 2014:
Saya akan bagi-bagi source code website Cova ini, jadi jika yang ingin mempelajarinya langsung bisa tinggal download. Saya mengharapkan kesadaran diri masing-masing agar tidak disalah gunakan dan tetap menghargai hak cipta. Silakan download disini untuk source codenya. Untuk yang mendownloadnya, waktu mau test di localhost. Harus import databasenya dulu. Buat database namanya db_cova, lalu import file .sql yang ada file rar atau folder hasil extractnya. Jika ada error atau bingung tanya langsung saja lewat komentar artikel ini atau ke facebook saya dengan menyertakan teks errornya.
Silakan dikembangkan juga karena pada proyek untuk cuma untuk sebagai penggambaran pembuatan website dari awal dan masih banyak sekali kekurangan maupun kesalahan.


Mohon kerja samanya dan semoga bermanfaat :)

74 komentar:

  1. Simple tp keren.... mantaaap, Gan!

    ReplyDelete
    Replies
    1. Hehe, terima kasih om. Masih perlu banyak belajar lagi :D

      Delete
  2. sangat2 iformaif semua tutorialnya... lengkap lagi..support u...gan...! thx...!

    ReplyDelete
    Replies
    1. Terima kasih kembali atas dukungannya :)

      Delete
  3. Mungkin perlu dibiasakan pake guide gan biar pixel perfect desainnya. Sama videonya kok gak HD widescreen sekalian gan? Materinya bagus lho, tapi videonya terlihat kecil.

    ReplyDelete
    Replies
    1. Guide gimana ya om? belum paham :D
      Untuk kualitas video tinggal di pilih aja om, saat mau buffering di youtube. Cek post di atas, udah saya edit :)

      Delete
    2. Guide itu garis panduan biar designnya pixel perfect. Kalo di OS X aku pake tombol Cmd + ; . Kalo di Windows mungkin Ctrl + ; .Agan pake CS6, mubazir kalo gak pake guide :). Soal video maksud saya HD widescreen, biar gak kelihatan kaya' gini gan http://cl.ly/image/3H0A0z0V0b3a Kalo widescreen kan kelihatan lega gan :)

      Delete
    3. Terima kasih banyak atas infonya om :)
      Oh itu, saya belum tau caranya rekam biar bisa widescreen :|

      Delete
  4. mantabs gan sharing2 ilmu,indah nya berbagi,smoga nanti di dapat pahala gan :D dan ilmu nya makin luas.....

    ReplyDelete
    Replies
    1. Amiin, terima kasih atas tanggapannya. Semoga bermanfaat om :) ditunggu juga saran atau kritiknya :D

      Delete
  5. Replies
    1. Masih dalam planning seh, mau dibikin versi teks tapi masih mikirin implementasinya. Agak susah soalnya :D sambil nunggu waktu luang juga.

      Delete
  6. Replies
    1. Terima kasih banyak om...
      Semoga tutorialnya bermanfaat :)

      Delete
  7. Lengkap sekali mas, saya jadi bisa belajar nih... Terima kasih atas share nya...

    ReplyDelete
    Replies
    1. Terima kasih kembali om :) Senang bisa berbagi ilmu...

      Delete
  8. kalo ada paket dvdnya, dan saya ada uang, saya beli deh :hammer:

    ReplyDelete
    Replies
    1. Hoho, bagian akhir video masih belum selesai seh. Tunggu selesai dulu baru bisa dijadikan paket dvd :D

      Delete
  9. Sedot kang, mantap nihh kritik sarannya nyusul kang :-D

    ReplyDelete
    Replies
    1. Wah sip, ditunggu om kritik dan sarannya :D

      Delete
  10. kalok masukin gambar jadi backgroundnya gimana mas trus bisa responsive juga gak ntar??

    ReplyDelete
    Replies
    1. Bisa om, coba pelajari kodenya disini http://css-tricks.com/perfect-full-page-background-image/

      Delete
  11. Keren mas... makasih udah bebagi mas, semoga mas bsa makin sukses kedapannya. AMIN

    ReplyDelete
  12. Di tunggu part selanjutnya gan.. sangat bermanfaat

    ReplyDelete
    Replies
    1. Terima kasih banyak atas dukungannya om :)

      Delete
  13. mantap bang gare...
    ane mengukung dari teman sebangku mu :v

    ppppp

    ReplyDelete
  14. Mantap Mantapppppp (Y) ... Keep Share om ...
    kunjugan balik ya :D http://hasnydes.com

    ReplyDelete
    Replies
    1. Terima kasih banyak om :)
      Desain webnya keren banget :D

      Delete
  15. mantappp tutorialnya sangat bermanfaat bagi saya yg pengen belajar lebih dalam, sukses terus n keep share :)

    ReplyDelete
  16. Di Tunggu KElanjutanya Gan keren :D

    ReplyDelete
  17. minta link downloadnya dong om....!!! cape nih tiap kali pengen belajar harus buka youtube...!!! kalo bisakan makin bermaanfaat tuh ...!!! mohon balasannya...!!!

    ReplyDelete
    Replies
    1. Bisa, kamu tinggal download videonya di youtube. Caranya bisa pakai aplikasi Youtube Downloader atau pakai Internet Download Manager. Kalau download pilih kualitas yang bagus sekalian. Aplikasinya bisa dicari di internet :)

      Delete
  18. di tunggu maz lanjutanya, walaupun ana blom menyimah semua tetapi sangat mudah di fahami, tapi suaranya maz terlalu pelan. makasih sudah berbagi sangat bermanfaat. salam kenal

    ReplyDelete
    Replies
    1. Hehe, sama-sama mas :) Masih banyak kekurangan memang, punya tips atau artikel tentang pembuatan tutorial yang lebih baik?

      Delete
  19. Bagus mas hehe, btw boleh minta kode reset CSS nya xixixi

    ReplyDelete
    Replies
    1. Ini mas http://pastebin.com/7sdN7d16. Sebetulnya di bagian deskripsi videnya sudah saya sediakan link reset CSS.

      Delete
  20. Tulisan SCriptnya gak jelas gan, maklum masih belajar....
    Bisa kirim skripnya ke rasaryoso@yahoo.co.id... Terimakasih sudah berbagi Gan, Semoga Alloh menambah rejeki anda... Amin...

    ReplyDelete
    Replies
    1. InsyaAllah dalam bulan ini selesai mas dan untuk source code project webnya akan saya bagikan secara lengkap. :)
      Nanti saya kabarin kalo sudah selesai. Terima kasih banyak...

      Delete
  21. Mas yang bagian 19 sama 20 kapan diuploadnya?

    ReplyDelete
    Replies
    1. Dalam bulan ini InsyaAllah selesai mas :)

      Delete
  22. Replies
    1. Belum punya waktu untuk implementasi ke teks mas, hehe...

      Delete
  23. Tutorialnya sangat membantu gan,,
    mantap ....

    ReplyDelete
    Replies
    1. Terima kasih mas, selamat belajar :)

      Delete
  24. pingin belajar, dari mana memulainya yaaa,......

    ReplyDelete
    Replies
    1. Dimulai dari awal mas :D Yaitu belajar dasar HTML, kemudian lanjut ke CSS.
      Mulai latihan bikin layout / tata letak website atau latihan membuat website statis. Setelah bisa baru beranjak ke PHP dan MySql untuk pembuatan website yang dinamis :)
      Pokoknya harus sering latihan dan jangan malu bertanya, Insya Allah sudah bisa dalam jangka waktu beberapa bulan.

      Delete
  25. mas bagiin tutorial membuat vidio tutorial dong.lagi pengen belajar nih...terimakasih

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. Yang paling Uniq adalah Suara Bang Garry nya hehehehehehehe....

    ReplyDelete
  28. Ada Revisi Video ga bang...tidak terlihat jelas bang

    ReplyDelete
    Replies
    1. Tidak ada mas :) Gak terlihat jelasnya darimana?

      Delete
  29. Gan waktu ane jalanin tuh hasil donwloadan, ada error di index.php line 18

    ReplyDelete
    Replies
    1. Teks errornya apa mas? Kemungkinan situ belum bikin database dan import file .sql yang sudah saya sediakan

      Delete
    2. Notice: Undefined variable: mysqli in C:\xampp\htdocs\cova\index.php on line 10

      Fatal error: Call to a member function query() on a non-object in C:\xampp\htdocs\cova\index.php on line 10

      Udah kok mas

      Delete
    3. Coba cek file config.php, apa sudah diganti sesuai kenyataan aslinya milik mas? Seperti user, password, nama databasenya mungkin beda.

      Delete
    4. Sudah, masih banyak undefined index blablabla

      Delete
    5. mas saya mengalami masalah yg sm.. config.php sudah saya sesuaikan dengan punya saya
      tp msh Fatal error: Call to a member function query() on a non-object in C:\xampp\htdocs\cova\index.php on line 18 ketika buka index.php nya

      db jg udh saya import.. nm db jg udh sesuai..

      mohon penjelasannya segera ya mas..

      Delete
  30. mas kenapa yg bagian 20 gk bisa dibuka, dan menuju alamat blogger.com/null ?

    ReplyDelete
  31. terima kasih banget om garry ... untuk izin downloadnya dan juga minta izin share yahhh om...!!! semoga bermanfaat untuk orang banyak!!! amin :D

    ReplyDelete
    Replies
    1. ohhh iya om...!!! ane minta refransi untuk program komentar pengunjung om!!! ... makasih :D

      Delete
    2. Sama-sama om konde :D
      Aamiin, silakan di share om :)

      Delete
    3. Ini referensinya untuk bikin sistem komentar om :)
      http://www.w3bees.com/2013/09/comment-system-with-jquery-ajax-php-mysql.html
      http://www.2my4edge.com/2013/05/comment-system-using-php-and-mysql.html

      Kalo mau lebih banyak lagi, bisa searching pakai keyword "How to make system comment in php mysql"

      Delete
  32. Saya nggak ada baca tentang security disini. Seperti website security encryption mungkin bisa ditambahin tuh sob biar makin maknyus. Sukses selalu

    ReplyDelete
    Replies
    1. Sudah ada md5 kok, untuk enkripsi password admin :) Terima kasih mas atas sarannya...

      Delete
    2. bang klu bsa mnta scrict nya dong.......

      Delete
  33. Mas punya tutorial .htacces dalam bentuk pdf nggak?? soalnya saya belum bisa htaccess.. :)

    ReplyDelete