Archives September 2022

Menjadi penulis TWD TWD

Selamat datang di situs Tutorial Web Design, website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk masyarakat kreatif di Indonesia.

Sebelum mendaftar, Baca halaman ini terlebih dahulu
Kami sangat senang anda ingin berkontribusi jadi penulis di website Tutorial Webdesign ini, sejatinya dengan hadirnya website ini kami berkomitmen ingin memberikan artikel-artikel menarik dan berbobot tentang dunia desain dan web development di Indonesia. Namun apa yang kami berikan bisa jadi kurang atau masih sangat kurang.

Oleh karena itu kami mengajak anda semua untuk ikut berkontribusi secara suka rela dengan menulis dan memberikan Ilmu pengetahuan, Informasi atau resource menarik dan bekualiatas untuk orang-orang yang tertarik dengan dunia Web design, Web Development dan Graphic Design di Indonesia.

Apa keuntungan menulis disini? Baca selengkapnya disini

Kami memperhatikan kualiatas konten.
Mungkin tidak semua artikel yang anda ajukan kami terima dan terbitkan diwebsite ini, kami mencoba selektif demi terjaganya kualitas konten di website ini. Semua demi kenyamanan pembaca dan kemajuan ilmu kita semua. Jadi berikanlah tulisan terbaik anda untuk para pembaca yang punya hobi dan ketertarikan yang sama dengan kita.

Artikel anda akan kami review sebelum diterbitkan.

Ketentuan Privasi dan Hak Cipta.
Terima kasih untuk tidak menyalin tulisan yang ada di website lain untuk ditulis di Tutorial-Webdesign. Anda bisa menulis dengan topik serupa tapi buatlah dalam versi anda sendiri. Sebisa mungkin hargai karya orang lain.
Tuliskan sumber berupa link(tautan), jika ada bagian dari tulisan anda yang mengutip dari website lain atau pernyataan orang lain.
Tuliskan sumber jika anda menggunakan gambar yang ada di website lain atau milik orang lain (gunakan gambar yang memang bebas untuk digunakan).
Jika ada masalah dengan penyalahgunaan Privasi dan pelanggaran hak cipta, semua ditanggung oleh penulis sendiri, karena tidak mungkin kami bisa mengawasi 100% artikel yang ditulis beserta resource yang digunakan adalah hak milik penulis atau sesuatu yang bisa digunakan oleh penulis itu sendiri, disini kami hanya bisa melakukan pengecekan sesuai kemampuan kami sebelum artikel di publish.
Tulisan yang sudah dipublish menjadi milik tutorial-webdesign.com sepenuhnya.
Jika tulisan yang sudah dipublish ada kesalahan dan ingin dilakukan perubahan (edit), penulis bisa mengirimkan revisi terhadap tulisan tersebut melalui email ke: [email protected] .
Topik Tulisan
Berikut topik-topik tulisan yang bisa anda pilih sebagai bahan tulisan anda di Tutorial Web Design (TWD)

Web Design: Apapun tentang web design, baik itu HTML/HTML5, CSS/CSS3, Typography, studi kasus, tehnik mendesain, cerita inpirasi anda saat mendesain, pembuatan template, atau pembuatan elemen-elemen yang ada di halaman website, ulasan atau review.

Web Development: Mencakup hampir semua tentang pengembangan website mulai dari PHP, Framework, CMS (WordPress, Drupal, Joomla) Javascript, Plugin Jquery, Responsive web, Mobile web, Tutorial, coding, teknik optimaliasai website, web server, SEO, database dan lainnya.

E-commerce: CMS, Plugins, tehnik berjualan online, studi kasus, ulasan, dll.

Graphic Design: Photoshop, Illustrator, Corel Draw, InDesign, dan lainnya.

Free: Icon, Font, Template gratis yang berguna untuk para pembaca.

Bagaimana Memulai?
Jika anda tertarik langsung saja klik tombol dibawah ini untuk melakukan registrasi

Daftar Menjadi Penulis

Teknik Menulis
Kami sangat menjaga kualitas konten yang ada di website ini, jadi sebaiknya gunakan bahasa yang sopan agar enak dibaca.

Jika tulisan anda berisikan script PHP, HTML, CSS, Javascript, dll maka gunakan aturan berikut ini.

Advantages of Writing

Before you write or become a guest author at Tutorial-webdesign.com maybe you will ask questions like this,

“Why am I writing on this website? What’s the point of writing here?”

Many readers ask such questions via inbox, email, and some comments on the web.

In the following, we will mention some of the advantages for the writers whose writings we publish.

  1. Installing Website Links
    The author can enter a personal website address in the profile section of the administrator page, so that the link and website name will appear in every post published on this website, with a link to the personal website, the author’s website automatically gets a dofollow backlink for free (good for website SEO). your personal).

Sample Bio at the bottom of the article
Figure 1 – Sample Bio at the bottom of the article

  1. Can Install Links to Social Media Accounts
    Authors can enter links to social media accounts such as Twitter, Facebook, Google+, etc., so that every author’s writing that we publish will be attached (See Figure 1).
  2. Can Put Banners
    The author can put a banner measuring (542px × 150px) so that the banner will appear on the author’s profile page, the banner will be linked directly to the author’s website address, then the author’s website will automatically get a free backlink again (good for SEO).

Example of Author Profile Page
Figure 1. Example of Author Profile Page (seohokjie)

  1. Enter Biodata
    The author can include a brief bio about himself to be better known by the readers.
  2. We will post your article to Social Media Accounts
    Articles written by the authors will be distributed to Tutorial-Webdesign.com social media such as Twitter and Facebook which have quite a lot of followers.

Twitter page @tut_web
Figure 3 – Twitter page @tut_web

  1. Your Article is Read by Many People
    Tutorial-webdesign.com has more than 115,000 Page Views per month, so your website is very likely to be read by many people, the writing that is read may lead readers to your website, because of the link to your website.

Visitor Statistics January 2014
Visitor Statistics January 2014

Meanwhile, data from Jetpack shows that the average daily visitors of Tutorial-Webdesign.Com is between 4000 to +4800. There are many opportunities for your articles to be read, the opportunities for readers to go to your personal website can also be many.

Jetpack Stats
Jetpack Stats

  1. Other Benefits.
    There are many more benefits by sharing knowledge at Tutorial-Webdesign.com, one of the other advantages is that your knowledge will increase because you have shared your knowledge, so you will be encouraged to seek new knowledge again, and don’t forget the reward you get by sharing with others.

so much

Those are some of the advantages of writing on tutorial-webdesign.com, if you are interested in becoming a writer here, please register yourself, and immediately submit your article.

Creating Multiuser Login With CodeIgniter

Creating a Multiuser Login Using Codeigniter – In this tutorial I will explain how to create a multiuser login session with CodeIgniter, without saying much, let’s find out how to create a multiuser login session with CodeIgniter?

First create a database and a table for the user, here I create a codeigniter database and a login_session table with the following sql:

Untitled

— Database: codeigniter


— Table structure for table login_session

CREATE TABLE IF NOT EXISTS login_session (
uid bigint(20) NOT NULL,
username varchar(30) NOT NULL,
password varchar(255) NOT NULL,
level enum(‘admin’,’member’) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

— Dumping data for table login_session

INSERT INTO login_session (uid, username, password, level) VALUES
(1, ‘admin’, ‘21232f297a57a5a743894a0e4a801fc3’, ‘admin’),
(2, ‘member’, ‘aa08769cdcb26674c6706093503ff0a3’, ‘member’);

— Indexes for dumped tables

CodeIgniter Database
Note: the password uses the database so when you create a new user it is expected to use md5 for the password.

After finished creating the database we will create a new folder in your htdocts folder here I use xampp create a folder with the name login_session then create a new Controller with the name auth.php :

if you follow all the tutorials on the structure of the folder and files in the codeigniter folder it will be like this, I marked a red line which means the file that we created in the tutorial creates a multiuser login session with this codeigniter

1

Open your creation and see if it is correct a simple login form will appear with the Log In button. Enter the username and password that is in the database then click the login button, if the admin who enters will be directed to the admin page, if the member will be directed to the member page

7 Free And Responsive Blogspot Blogger Templates

Download Free And Responsive Blogspot Blogger Templates – Blogspot is a blogging platform that is very busy with users, of course because blogspot or blogger.com is owned by Google. Who doesn’t like google products. All gmail users can easily register a blog on blogspot

But unfortunately the appearance of the blogs that use this blogspot is not good, you could say it’s ugly. In stark contrast to WordPress which looks neater and cleaner.

On this occasion, Tutorial-Webdesign.com will provide a list of cool blogger templates that you can use, of course this template is neat, clean, and responsive or the display will adjust the screen size of the device, whether desktop, tablet pc or smartphone so that the website you look prettier.

  1. Breeze
    breeze blogger free template

Demo | Download

  1. Straight
    straight blogger responsive

Demo | Download

  1. Tech Blog
    TechBlog blogger responsive

Demo | Download

  1. Sora Seven
    sora seven responsive blogger

Demo | Download

  1. Scratch
    Scratech blogger responsive

Demo | Download

  1. Dribble
    dribbling blogger

Demo | Download

  1. Simplify
    Simplify responsive blogger template

Demo | Download

Hopefully the list of free and responsive blogspot templates above can be useful for those of you who like to use Blogger.com

If you have recommendations for other blogspot blogger templates, please write them in the comments column

Codeigniter Initial Settings

Eliminating index.php in codeigniter is not difficult, but if you forget or don’t know how, the website may not run properly.

htaccess

This afternoon, a friend asked about his website, after uploading it to hosting, how come it didn’t work well, the CSS wasn’t found.

This can all be caused by incorrect htaccess or incorrect config settings.

The following is the initial codeigniter setting that can be used. (Not only to remove index.php) but for initial settings when you use codeigniter as a website framework.

config.php
First try to open the config.php file located in application/config
Base_url should be left blank if you are using Codeigniter 2.XX
$config[‘base_url’] = “”;

index_page should also be left blank, for better seo, but also need htaccess to complete this setting.
$config[‘index_page’] = ”;

Uri_protocol is made AUTO
$config[‘uri_protocol’] = ‘AUTO’;

Encryption_key should be filled with random characters.
$config[‘encryption_key’] = ‘B3b4SSsss555’;

sess_cookie_name should be changed, so that the ROBOT created by irresponsible people cannot detect if your website was created with codeigniter.
$config[‘sess_cookie_name’] = ‘whatever’;

sess_encrypt_cookie should be set TRUE so that cookies are encrypted
$config[‘sess_encrypt_cookie’] = TRUE;

Other settings related to sessions and cookies should also be changed to be more secure 🙂

HTACCESS
To complete the codeigniter website settings so that it runs properly, and so that the index.php in the URL is also lost, it is necessary to create a file without a name but with the extension .htaccess


Options -Indexes

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_URI} ^system.*

RewriteRule ^(.*)$ /index.php/$1 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index.php|images|robots.txt)
RewriteRule ^(.*)$ /folder_name/index.php?/$1 [L]


# If we don’t have mod_rewrite installed, all 404’s
# can be sent to index.php, and everything works as normal.
# Submitted by: ElliotHaughin

ErrorDocument 404 /folder_name/index.php


there it says folder_name, because it was created in a folder in htdocs, when uploaded to the hosting server, usually we don’t put it in the folder, but directly in the public_html, so when hosted /folder_name must be deleted, leaving only /index.php.

Creating RSS Feeds in Codeigniter

Creating an RSS Feed with Codeigniter is our discussion this time.

Every website should have an RSS Feed, this is useful so that other people can take the news that is on our website to be displayed on their website, the content can be entire articles, or only pieces of articles.

In addition to being displayed on visitors’ websites, RSS Feeds are also useful if website visitors want to subscribe to the latest articles from our website through Google Reader, or applications on their cellphones.

rsss

If we use a CMS such as WordPress, Drupal or Joomla, usually the RSS Feed is already available, for example for our favorite website the RSS Feed address is located in DOMAIN/feed.

http://www.tutorial-webdesign.com/feed/

However, if we create a website without the help of the CMS that we mentioned above, then we must generate the RSS Feed manually.

We assume we create a website using the Codeigniter Framework (we assume you already understand the basics of MVC in Codeigniter), then the steps are something like this:
We take a few articles in our posting table, usually 10 articles are enough. We load the article in the model, then we parse the data from the Controller to the View in XML (not HTML). Examples are as follows.

Creating Databases and Tables
Create a database with the name you want, then create a table with the name tbl_posts, the structure is as follows:

CREATE TABLE tbl_posts (
post_id int(5) NOT NULL AUTO_INCREMENT,
post_title varchar(100) NOT NULL,
slug varchar(255) NOT NULL,
post_content longtext NOT NULL,
post_img varchar(100) NOT NULL,
post_date datetime NOT NULL,
click int(10) NOT NULL,
PRIMARY KEY(post_id)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Enter some data, in this example you should enter 10 sample articles, you can also try the SQL file that we have prepared, the file that you can download at the end of this article

Create Controller (rss.php)

Making Captcha in Codeigniter

Hello Web Developers .., on this holiday we will try to make a Captcha in Codeigniter, this method is the easiest way because it is very simple but very useful. Most captcha tutorials with codeigniter that I found on google, use complicated ways and are too complicated to use. Here we will try the easiest way.

Captcha Codeigniter

First, let’s get acquainted a little with Captcha.

The term “CAPTCHA” (derived from the English word “capture”) was coined in 2000 by Luis von Ahn, Manuel Blum, Nicholas J. Hopper (all from Carnegie Mellon University), and John Langford (IBM). This term is an English acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart”.

CAPTCHA or Captcha is a form of challenge-response test used in computing to ensure that answers are not generated by a computer.

Examples are as follows:

Example Captcha
Captcha example, source: wikipedia

Its use is usually to prevent SPAM, so to ensure that the person filling out the form is a challenge in the form of a code (captcha) that must be typed by the user (not the machine).

Captcha on Codeigniter
Okay, let’s just apply it in codeigniter.
Please note that in this tutorial we are still using pure codeigniter that has not been set before.

First, create a captcha folder, its location is parallel to the system and application folders, setting CHMOD to 777 or 666.

Controller
After that create a controller named registration.php, and write the following script.

Creating Multiuser Login With CodeIgniter

This is the Sophistication of Google’s Data Center

In this article we will try to see how the atmosphere of the Google Data Center is by using Google Street View, photo gallery, and there are some videos that you can watch to get inspiration from the sophistication of the people behind Google, so that we can do something more useful. in this life.

Google is arguably the ruler of the Internet today. Almost in all fields on the Internet he mastered the technology.

Starting from Search Engine, Email, Maps, Image, Video, Shopping, Earth, Social Media, Android, Youtube, etc. Tired of being mentioned one by one.

So what we might be confused about is how Google manages and stores our data? How big is the computer used? How is the cooling system used, etc., etc.?

For those of you who are curious, you can watch the following video.

  1. Street View
    Explore a Google data center with Street View
    )

To try exploring Google Data Center using Street View, you can visit the following URL

http://www.google.com/about/datacenters/inside/streetview/

  1. Videos
    Google Data Center Security
    http://www.youtube.com/watch?v=1SCZzgfdTBo

Google Data Center Efficiency Best Practices
Google Data Center Efficiency Best Practices. Part 1 – Intro

)

Google Data Center Efficiency Best Practices. Part 2: Manage Airflow

)

Google Data Center Efficiency Best Practices. Part 3 – Adjust Thermostat

)

Google Data Center Efficiency Best Practices. Part 4 – Utilize Free Cooling

)

Google Data Center Efficiency Best Practices. Part 5 – Optimize Power Distribution

)

For more details, you can visit the following link

When and Why A Website Should Be Redesigned

Doing a redesign or determining when is the right time to make changes to the appearance of the website is “easy and difficult”, for websites made using CMS of course this is very easy, just look for templates and then change them, but for websites made without CMS it will difficult because it has to be remade according to the system.

But that’s not the point that we will discuss here, it’s not difficult or not difficult, but why and when a website must be made changes to the design or commonly known as redesign.

Website Layout
Image Credit : INPIVIC

The website tutorial-webdesign.com a month ago, at the beginning of March to be exact, also made a design change, from the old design that was made for the first time about a year ago to the design it is today. This is of course for various reasons, and some of them are in the points that we will discuss, but we will not only discuss the reasons for making changes to tutorial-webdesign.com, but we will try to discuss globally.

Once again making changes to the appearance is not easy, and requires a lot of consideration, especially for large-scale websites or websites that are already very well known such as Yahoo, Microsoft, and others. If you make a wrong move or do it at the wrong time, it can have a bad impact on the company’s image

There are several reasons why and when a website should make a change in appearance.

  1. The Old Design Is Less Attractive.
    This is the decision of the website owner, if the owner feels that the design already looks unattractive then the website could be changed, because an unattractive website will make the website owner himself not excited to update the contents of the website, such as lazy writing, etc.

Previous Design Tutorial-webdesign.com
Previous Design Tutorial-webdesign.com

But actually the website owner should not be that selfish, because after all the website was made so that it can be enjoyed by others, so it would be better if the owner involved or asked visitors whether this design is still good or should be replaced immediately, is still liked or has started not If you like it, don’t forget to also discuss with your teammates to ask for their opinion regarding the plan to change the look, don’t be careless by assuming something is bad but in the eyes of others it is still very good.

Although the decision to make changes remains in the hands of the website owner or the highest authority on the website.

  1. Confusing Navigation System.
    Most of the existing websites are dynamic, website content can be added and deleted at any time, in one to two years or even just a few months, so the website content is already very much compared to when the website design was created. For example, there are more and more menus that confuse visitors, this is certainly a problem, and you should immediately redesign it so that the website navigation system can function more optimally.

Concept Navigation
Image by jwyg | Concept Navigation

In addition to confusing navigation because there are too many, a navigation system that is not good because it is not visible also needs to be considered, this is what happened to the old tutorial-webdesign.com design, where visitors had difficulty exploring the contents of the website because the menu was less specific, which in the end make visitors only see 1 or 2 pages, even though there are quite a lot of pages on this website.

  1. Layout is getting messy & difficult to update.
    When a website is launched everything looks fine, all parts look neat, but over time it turns out that many changes have occurred on the website, the content is increasing and the format for writing the content also turns out to be different and not as imagined at the time. the first time the website is designed, so the layout can no longer accommodate the needs of the content.

Crowded Train
Image credit : Techcrunch

A messy website also eventually makes it difficult for website owners to update, so it is confusing where else to put content, because everything looks crowded and messy. If these things have happened, then the website owner should immediately make changes so that everything can be accommodated well and all went well.

  1. Long Website Load Time.
    Snail Slow
    Image Credit : myahya

When loading the website feels heavy, it could be because of the many additions to scripts (modules / plugins) that are done in the middle of the road along with the variation in content, or because of the use of images.

When and Why A Website Should Be Redesigned

Doing a redesign or determining when is the right time to make changes to the appearance of the website is “easy and difficult”, for websites made using CMS of course this is very easy, just look for templates and then change them, but for websites made without CMS it will difficult because it has to be remade according to the system.

But that’s not the point that we will discuss here, it’s not difficult or not difficult, but why and when a website must be made changes to the design or commonly known as redesign.

Website Layout
Image Credit : INPIVIC

The website tutorial-webdesign.com a month ago, at the beginning of March to be exact, also made a design change, from the old design that was made for the first time about a year ago to the design it is today. This is of course for various reasons, and some of them are in the points that we will discuss, but we will not only discuss the reasons for making changes to tutorial-webdesign.com, but we will try to discuss globally.

Once again making changes to the appearance is not easy, and requires a lot of consideration, especially for large-scale websites or websites that are already very well known such as Yahoo, Microsoft, and others. If you make a wrong move or do it at the wrong time, it can have a bad impact on the company’s image

There are several reasons why and when a website should make a change in appearance.

  1. The Old Design Is Less Attractive.
    This is the decision of the website owner, if the owner feels that the design already looks unattractive then the website could be changed, because an unattractive website will make the website owner himself not excited to update the contents of the website, such as lazy writing, etc.

Previous Design Tutorial-webdesign.com
Previous Design Tutorial-webdesign.com

But actually the website owner should not be that selfish, because after all the website was made so that it can be enjoyed by others, so it would be better if the owner involved or asked visitors whether this design is still good or should be replaced immediately, is still liked or has started not If you like it, don’t forget to also discuss with your teammates to ask for their opinion regarding the plan to change the look, don’t be careless by assuming something is bad but in the eyes of others it is still very good.

Although the decision to make changes remains in the hands of the website owner or the highest authority on the website.

  1. Confusing Navigation System.
    Most of the existing websites are dynamic, website content can be added and deleted at any time, in one to two years or even just a few months, so the website content is already very much compared to when the website design was created. For example, there are more and more menus that confuse visitors, this is certainly a problem, and you should immediately redesign it so that the website navigation system can function more optimally.

Concept Navigation
Image by jwyg | Concept Navigation

In addition to confusing navigation because there are too many, a navigation system that is not good because it is not visible also needs to be considered, this is what happened to the old tutorial-webdesign.com design, where visitors had difficulty exploring the contents of the website because the menu was less specific, which in the end make visitors only see 1 or 2 pages, even though there are quite a lot of pages on this website.

  1. Layout is getting messy & difficult to update.
    When a website is launched everything looks fine, all parts look neat, but over time it turns out that many changes have occurred on the website, the content is increasing and the format for writing the content also turns out to be different and not as imagined at the time. the first time the website is designed, so the layout can no longer accommodate the needs of the content.

Crowded Train
Image credit : Techcrunch

A messy website also eventually makes it difficult for website owners to update, so it is confusing where else to put content, because everything looks crowded and messy. If these things have happened, then the website owner should immediately make changes so that everything can be accommodated well and all went well.

  1. Long Website Load Time.
    Snail Slow
    Image Credit : myahya

When loading the website feels heavy, it could be because of the many additions to scripts (modules / plugins) that are done in the middle of the road along with the variation in content, or because of the use of images.