bams java developers: Januari 2018

Kamis, 11 Januari 2018

TUTORIAL DEMO IMG WEB DESIGN

Tutorial Membuat Infinite Scroll Dengan PHP, MySQL, Jquery

Infinite Scroll atau halaman website yang ketika di scroll tidak ada batasnya karena dibuat otomatis mengambil (load) data baru untuk ditampilkan dalam satu halaman tersebut sampai data tersebut terunduh semua. Infinite scroll ini menggantikan fungsi paging (penomoran halaman) yang sejak awal sering kita lihat di berbagai website.

Pada tulisan kali ini akan membahas bagaimana cara membuat infinite scroll sederhana untuk website anda, dimana kita akan mencoba membuatnya dalam sebuah halaman gallery sederhana.
Seperti kita ketahui, beberapa website yang menerapkan model infinite scroll ini yaitu Twitter, Facebook, Pinterest, Mashable, dll.
Langkah Awal: Membuat Database SQL
Pertama kita perlu menyiapkan sebuah database, disini sebagai contoh kita hanya membuat satu table untuk menampung nama-nama file gambar yang ingin ditampilkan, nama database nya adalah infinitescroll.

CREATE TABLE `scroll_images` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `order` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=0 ;

Membuat Halaman Index.php

Dihalaman index.php ini kita tidak terlalu membutuhkan banyak tag HTML, kalau dilihat kita hanya perlu membuat 3 div dengan ID yang berbeda-beda, tentunya dengan struktur HTML standar, letakan div tersebut didalam body.

<div id='more' >Loading More Content</div>
<div id='no-more' >No More Content</div>
<div id='result'></div>

Kita akan menampilkan 2 gambar pada halaman index.php dengan meletakan kode PHP untuk query sql berikut ini pada bagian paling atas index.php

$con = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name");

$result = mysql_query("select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 2");

$row_object = mysql_query("Select Found_Rows() as rowcount");
$row_object = mysql_fetch_object($row_object);
$actual_row_count = $row_object->rowcount;

Ajax dengan Jquery
Masih di file index.php, kita akan menambahkan Javascript / Ajax dengan framework jquery untuk me-load data lain setalah 2 gambar yang kita load pada awal website dijalankan, script javascript ini di letakan di [head] dan [/head], sebelumnya jangan lupa menyertakan script jquery yang bisa didownload langsung dari website jquery.com

var page = 1;


$(window).scroll(function () {
    $('#more').hide();
    $('#no-more').hide();

    if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
        $('#more').css("top","400");
        $('#more').show();
    }
    if($(window).scrollTop() + $(window).height() == $(document).height()) {

        $('#more').hide();
        $('#no-more').hide();

        page++;

        var data = {
            page_num: page
        };

        var actual_count = "<?php echo $actual_row_count; ?>";

        if((page-1)* 2 > actual_count){
            $('#no-more').css("top","400");
            $('#no-more').show();
        }else{
            $.ajax({
                type: "POST",
                url: "data.php",
                data:data,
                success: function(res) {
                    $("#result").append(res);
                    console.log(res);
                }
            });
        }

    }


});

Disitu kita bisa melihat kalau script diatas difungsikan untuk menentukan halaman dengan trigger yaitu ketika halaman sudah mencapai posisi tertentu, dengan ajax kita mengambil data gambar lainnya yang diproses di file data.php, berikut ini script php untuk melakukan query sql untuk mengambil data gambar tersebut
Data.php

$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 2) . ",12";

$con = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name");


$result = mysql_query("select  * from scroll_images order by id asc limit $set_limit");



$html = '';

while ($row = mysql_fetch_array($result)) {
    $html .= "<div><img src='images/" . $row['name'] . ".jpg' /></div>";
}


echo $html;
exit;

Script diatas digunakan untuk memproses pengambilan data dari database dan mengembalikan hasil (return a result) berupa data-data gambar yang sudah di susun dengan tag html seperti berikut <div><img></div> untuk ditampilkan di dalam div dengan ID #result.
Mempercantik Dengan CSS
Agar tampilan menjadi lebih cantik kita perlu memoleskan sedikit script CSS, berikut css yang digunakan

#result{
 width: 660px;
 margin: 20px auto;
 padding: 10px;
 background: #eee;
 border: 1px solid #ccc;
 overflow: hidden;
}

#result div{
 width: 620px;
 margin: 10px;
 float: left;
}

#result div img{
 width: 640px;
 height: auto;
}
#result div img:hover{
    opacity: .8;
}



#more{
    background: none repeat scroll 0 0 #666;
    color: #fff;
    display: none;
    font-weight: bold;
    left: 1000px;
    padding: 10px;
    position: fixed;
    bottom: 100px;
    z-index: 99999;
}
#no-more{
    background: none repeat scroll 0 0 #666;
    color: #fff;
    display: none;
    font-weight: bold;
    left: 1000px;
    padding: 10px;
    position: fixed;
    bottom: 100px;
    z-index: 99999;
}

Script css diatas digunakan untuk menempatkan tampilan loading di kanan bawah saat kita melakukan scroll pada halaman website.
HASIL

DEMO | DOWNLOAD

Untuk hasil yang lebih optimal, mungkin untuk desain front-end nya bisa digabungkan dengan masonry atau isotop.
Sekian tutorial membuat infinite scroll dengan menggunakan PHP, MySQL, dan Jquery ini, semoga berguna untuk anda yang sedang ingin mengimplementasikan model desain serupa. Salam web design indonesia

8 Alat Membuat Desain Web Responsive Untuk Developer

Alat Membuat Web Responsive Untuk Web Developer — Desain web adalah bagian yang penting dalam sebuah proyek pengembangan website. Klien pada saat ini menuntut sebuah website yang responsive untuk dibuat.

Dengan menggunakan HTML5 dan CSS3, hal tersebut tentu menjadi cukup mudah untuk para developer. Developer bisa lebih fokus pada desain web, user experience dibandingkan kode back-end.
Terdapat banyak framework yang tersedia secara online yang dapat dimanfaatkan untuk mendesain web. Ada grid yang fleksibel, gambar dan layout yang bisa digunakan developer.
Pada tulisan kali ini TWD akan informasikan kepada Anda beberapa tools yang bisa digunakan untuk mempermudah pekerjaan Anda dalam membuat desain web responsive.

1. Froont

Froont merupakan alat berbasis web yang efektif dan bisa berjalan di jendela browser Anda. Bisa digunakan untuk merancang desain front-end dari situs website. Alat ini termasuk mudah untuk digunakan, karena anda hanya perlu melakukan drag and drop elemen yang disediakan dan nanti akan terbentuk sendiri kode HTML dan CSS nya.

Froont (Foto: lafermeduweb.net)

2. Screenqueri.es

Screenqueri.es adalah alat yang berbasiskan pixel yang menarik untuk membuat web responsif. Anda bisa menguji tempilan web responsif Anda dengan menggunakan 30 perangkat yang berbeda menggunakan screenqueri.es.

3. Viewport Resizer

Viewport Resizer ialah alat untuk merancang berbasis browser. Anda bisa mengetes website responsive apapun menggunakan ini. Anda juga bisa membuat bookmark dari alat ini di browser Anda. Anda bisa menguji kompatibilitas layar dengan mudah dengan alat ini.

4. Opera Mobile Classic Emulator

Masih banyak sekali pengguna yang menggunakan Opera Mini di ponselnya. Oleh karena itu developer juga perlu untuk memeriksa apakah website nya sudah bagus jika dibuka dengan Opera atau belum dengan menggunakan Opera Mobile Classic Emulator ini.

Foto via kabatology.com

5. Review.js

Review.js ini dikembangkan dengan Javascript murni ini bisa digunakan untuk menguji efisiensi desain web Anda. Alat ini mengikuti prinsip “progresive enhancement”.

6. Jetstrap

Jetstrap merupakan alat untuk membangun antarmuka visual. Alat ini menyediakan cara untuk membuat prototipe dengan capat di browser. Desainer yang biasa bekerja dengan Bootstrap bisa memilih tools ini. Cukup drag and drop dalam menggunakan alat ini.

7. Adobe Edge Inspect CC

Ini termasuk alat yang cukup ringan untuk memeriksa desain web. Anda dapat mendownload toolbar dan plug-in dan uji coba desain pada perangkat yang berbeda. Adobe Edge Inspect CC ini mengikuti pendekatan minimalis saat merancang.

8. The Responsive Calculator

The Responsive Calculator adalah sebuah alat untuk desainer web untuk mengkonversi pixel PSD ke persen. Alat ini sangat berguna untuk digunakan selama awal pengembangan website responsive Anda.

Bagikan Ke Sosial Media

18+ Situs yang Wajib Dikunjungi & Diikuti Front-End Developer/Designer

Front-end developer adalah salah satu cabang dari profesi web developer. Fokus pekerjaannya adalah seputar membuat dan mengembangkan bagian depan sebuah web. Sederhananya begitu. Front-end developer mengubah desain yang dibuat web designer menggunakan HTML, CSS dan Javascript sehingga menjadi halaman web interaktif yang bisa diakses oleh pengguna.
Terkadang, seorang front-end developer juga merangkap sebagai web designer. Bahkan, terkadang juga lebih dikenal sebagai web designer, disamping sering disebut juga sebagai Front-end Designer dan Front-end Engineer. Hal ini karena baik Front-end Developer maupun Web Designer membutuhkan hal yang sama yaitu ide dan kreatifitas yang tinggi. Web designer dituntuk untuk dapat menciptakan desain web yang enak dilihat (User Interface) dan mudah digunakan atau dimengerti (User Experience). Sedangkan Front-end Developer dituntut untuk membuat halaman web yang interaktif dan mudah digunakan oleh pengguna.
Menjadi seorang Front-end developer juga dituntut untuk selalu up-to-date terhadap teknologi-teknologi baru yang populer di dunia. Berbagai library, plugins, framework, dan template muncul atau diperbarui setiap harinya, menjadi bagian yang ikut andil dalam perkembangan front-end development.
Oleh karena itu, adalah hal yang sangat penting bagi front-end developer untuk selalu terupdate pada informasi-informasi terbaru, juga bergaul dan berkolaborasi dengan orang-orang yang satu profesi dari seluruh dunia. Berikut ini adalah situs-situs yang membahas front-end development sekaligus juga tempat berkumpulnya para developer saling menunjukkan karyanya. Saran saya, setidaknya ikutilah salah satunya agar anda menjadi seorang front-end developer atau web designer yang up-to-date.
*note :
– Semua situs di bawah berbahasa inggris. Untuk situs berbahasa indonesia, sangat sulit untuk menemukan yang benar-benar berkualitas dan lengkap.
– Urutan situs di bawah tidak mencerminkan kualitasnya.

Artikel dan Tutorial

1. Smashing Magazine

Smashing Magazine secara khusus memang membahas seputar desain web dan front-end development. Kelengkapan kontennya sudah tidak diragukan lagi karena situs ini termasuk situs-situs pionir yang membahas tentang desain web. Kebanyakan kontennya adalah artikel-artikel seputar konsep-konsep dan tips-tips desain web beserta penerapannya.

2. Tutsplus

Seperti yang anda lihat, sebenarnya Tutsplus bukanlah situs yang dikhususkan front-end dev. Situs ini juga membahas tentang Desain Grafis dan Fotografi. Namun karena situs ini merupakan situs ‘course’ dan tutorial yang dikelola secara professional oleh envato -salah satu perusahaan besar yang juga mengelola themeforest, codecanyon, dsb-, kontennya menjadi sangat lengkap dan berkualitas.
3. SitePoint

Sitepoint adalah situs yang memang kontennya khusus berisi hal-hal seputar web development. Konsepnya hampir sama seperti Tutsplus yang menyediakan berbagai kursus dan tutorial. Konten-konten di sini tidak hanya ditulis oleh beberapa orang saja, melainkan oleh banyak orang. Di sini juga tersedia forum yang memungkinkan anda untuk berdiskusi dengan sesama web programmer.

4. 1st Web Designer

First Web Designer termasuk situs-situs awal yang membahas desain web. Jenis kontennya tidak jauh beda dengan Smashing Magazine yang membahas berbagai konsep desain web, berikut dengan panduan praktisnya. Situs ini juga membahas banyak tentang menjadi freelance web designer.

5. Web Designer Depot

Web Designer Depot merupakan situs desain web yang terbilang kreatif dan tidak membosankan. Konten-kontennya tidak jauh beda dengan 1st web designer dan smashing magazine. Yang membedakannya, situs ini menerbitkan comics of the week sebagai konten kreatif dan intermezo. Selain itu, Web Designer Depot juga menerbitkan berbagai resources web design yang cukup berkualitas.

6. Hongkiat

Hongkiat adalah situs yang membahas seputar teknologi digital, termasuk didalamnya web design dan web development. Walaupun tidak terfokus ke satu topik, situs ini mempunyai konten yang cukup lengkap dengan kualitas yang bagus, mengingat umur atau jam terbangnya yang sudah lama.

7. Scotch.io

Sejujurnya, saya belum begitu lama mengenal Scotch.io ini. Jika dilihat dari konten-kontennya, situs ini terfokus pada coding, bukan pada desain. Situs ini membahas tutorial-tutorial praktis mengenai front-end development dan back-end development dengan berbagai jenis platform dan bahasa pemrograman.

8. CSS-tricks

Sesuai dengan namanya, CSS-Tricks membahas berbagai tips dan tutorial CSS. Sejauh ini, CSS-Tricks merupakan situs terlengkap dan terbesar yang secara khusus membahas CSS. Selain sebagai situs blog, CSS-Tricks juga menyediakan Forum diskusi yang memungkinkan setiap pengunjungnya untuk daftar dan berdiskusi satu sama lain.

9. Html5 Rocks

Sesuai namanya, Html5 Rocks membahas berbagai hal mengenai HTML5. Bahasannya, tentu tidak akan jauh dari browser compability, trik-trik menggunakan Html5 dan hal-hal lain yang berkaitan. Selain itu, situs ini juga membahas tool browser dan web development yang dapat memudahkan para developer.

Creative Resources

Situs-situs di bawah berisi berbagai resource atau sumber-sumber belajar yang berbentuk file demo yang bisa anda download secara gratis.

10. Codrops

Dari semua situs yang saya tulis di sini, Codrops adalah situs desain web pertama yang saya kenal sejak saya belajar front-end development. Menurut saya, Codrops adalah situs desain web paling kreatif dan anti mainstream. Di sini tersedia berbagai resources sekaligus tutorial trik-trik CSS dan JS yang out-of-the-box. Konten-kontennya juga banyak yang merupakan hasil ide kreatif dan eksperimen dari penulisnya, yang sudah malang-melintang dalam front-end development. Selain itu, tersedia juga berbagai koleksi desain, ikon, font dan sebagainya.

11. W3 Layouts

W3 Layouts adalah situs yang menyediakan berbagai resources berupa template-template website terbaru, template dan desain UI website, dan sebagainya. Resources yang tersedia di sini diambil dari berbagai sumber/developer sehinga kualitas dan stylenya sangat beragam. Anda bisa mendownload dan mengunakan resources-nya secara gratis.

12. Codyhouse

Sebenarnya, Codyhouse merupakan situs kursus belajar HTML, CSS dan JS yang berbayar maupun gratis. Walaupun tidak selengkap situs-situs lain yang secara khusus menyediakan resources, codyhouse juga menyediakan berbagai resources gratis dan juga berbayar dengan kualitas yang tidak kalah bagus.

Playgrounds

Situs-situs di bawah adalah tempat para front-end developer melakukan berbagai eksperimen, belajar dan saling berbagi satu-sama lain.

13. Codepen.io

Bukan front-end developer kalau tidak kenal codepen. Sejauh ini situs ini merupakan playground terbesar dan terlengkap. Selain menyediakan tempat untuk bereksperimen dengan live demo, codepen juga memfasilitasi penggunanya yang ingin menulis seputar front-end development, membaca berbagai artikel, juga tempat untuk kolaborasi team (berbayar).

14. Jsfiddle

Seperti codepen, JS Fiddle adalah situs yang memfasilitasi para pengunanya untuk bereksperimen dengan HTML, CSS dan Javascript dengan berbagai librarynya. Walaupun fiturnya tidak selengkap codepen, JS fiddle juga sudah terkenal di kalangan front-end developer.

15. CSS Deck

Konsep CSS Deck tidak jauh beda dengan codepen. Walaupun fitur dan popularitasnya tidak sebagus codepen, CSS deck sudah mempunyai cukup banyak pengguna dan project sebagai sarana diskusi dan belajar anda.

16. Plunker

Sama seperti yang lainnya, plunker menyediakan tempat untuk para developer untuk bereksperimen dan berbagi karyanya.

Lain-Lain

Selain sumber-sumber di atas, ada juga link-link seputar front-end yang mungkin harus anda kunjungi juga.

17. Up-to-Date Front-end Rescue

Jika anda kurang puas dengan rekomendasi situs yang saya tulis di atas, mungkin anda baiknya anda mengunjungi situs ini. Situs ini juga berisi link untuk resources front-end developer agar tetap up-to-date. Di sini juga terdapat link mengenai newsletter minguan serta konferensi yang bisa anda datangi.

18. Javascript

Situs ini adalah pusatnya javascript, sesuai dengan namanya. Jika anda ingin mengetahui berbagai hal mengenai javascript yang meliputi tutorial, perkembangan, berita dan sebagainya, silahkan kunjungi situs ini.

19. Front-end Handbook

Terakhir, Front-end Handbook. Seperti namanya, ini adalah ‘buku saku’ untuk front-end developer yang berisi spesifikasi kerja, komunitas, resources, buku dan sebagainya. Situs ini di update setiap tahunnya sesuai perkembangan front-end development.
Itulah, situs-situs yang saya rekomendasikan bagi yang sedang belajar maupun sudah berprofesi sebagai web designer atau front-end developer. Jangan lupa juga untuk bergabung dengan grup-grup web designer yang pernah saya tulis

43 Contoh Flat Web Design Keren Untuk Landing Page

Perusahaan

Blocklevel

Nitrografix

Conversionforge

Madebyfibb

Fhoke

PSD2HTML

Pexelplant

Playgroundinc

Northbounddesign

Aplikasi

Sumall

Nextr

Geckoboard

Numbrs

Triplagent

Inky

Kippt

Publiq

Produk

Windows Phone

Fitbit

Wistia

Mailchimp

Teamsort

Yourkarma

Fusionads

Kinhr

Portofolio

BAMS JAVA

Saat ini, versi html sudah mencapai pada versi HTML 5 yang distandarkan pada 2008. Versi sebelumnya adalah HTML, HTML 2.0(22 september 1995), HTML 3.2(14 Januari 1996), HTML 4.0(18 Desember 1997), HTML 4.01(24 Desember 1999), ISO HTML (15 Mei 2000).
Setiap peng-update-an versi pada html ditambahkan tag-tag baru untuk memperlengkap objek dalam halaman web yang dibuat. Perkembangan HTML ini tentu saja sangat erat kaitannya dengan perkembangan Browser karena pada dasarnya browserlah yang menerjemahkan perintah-perintah dari kode-kode html menjadi objek yang diinginkan.
Setiap halaman website yang anda buka(termasuk halaman ini), terstruktur dari kode-kode html. Coba saja anda tekan CTRL + U (di firefox), atau klik kanan > view page source/ view source. Disitu akan ditampilkan script HTML yang membangun halaman web itu. Karena itu, setiap halaman web pasti berformat .html jika di download.
Untuk membuat file .HTML, anda bisa menggunakan notepad atau source code editor. Struktur kode html, dibagi menjadi beberapa bagian seperti dibawah ini :

<!Doctype html> <!– merupakan deklarasi html (dalam hal ini HTML5) –>
<html>
<head>
<title>Ini Judul Halaman Web</title>
<!– Di sini biasanya dimasukkan tag-tag html untuk menyertakan/memanggil file lain untuk melengkapi halaman. Seperti file css dan javascript. –>
</head>
<body>
Ini untuk isi dari halaman web, terdiri dari kode-kode html lainnya yang lebih kompleks
</body>
</html>

Cobalah copy-kan kode diatas pada notepad, lalu save-as sebagai file .html. Bukalah di browser, maka anda telah membuat sebuah halaman web baru.
Sekian. Selamat mencoba!
Kalau masih kurang jelas, silahkan tanya dikomentar. Jangan lupa share ke teman-teman anda jika anda rasa ini bermanfaat ^_^
~Muhammad Syakirurohman~
" data-medium-file="" data-large-file="" class="alignnone size-full wp-image-123" src="http://www.devaradise.com/id/wp-content/uploads/sites/4/2015/01/inspiration-flatdesign-portfolio-1.png" alt="BAMS JAVA web design" width="700" height="340">