Agratitudesign Impression | Graphic Web Design, Computer Network, Balinese Culture

Graphic Motion Video Art, Website, IT Network, Culture

Showing posts with label Web Design. Show all posts
Showing posts with label Web Design. Show all posts

On this occasion, I’d like to explain how to build web hosting server as our own, at our home on our PC. This is Part II of Building Web Hosting Server but now we are using double or multiple router port forwarding technique using Mikrotik as the router of local network. The script automatic update dynamic public IP that most probably we have to the No-IP sub domain. The script will run automatically by system scheduler, and check our current public IP every time its changed the script will send the current IP to the server, and will know that the sub domain that we have should be updated to the current IP, and finally your sub domain still keep represent as your current public IP. So we don’t need “Dynamic Update Client” app of because this job will be handle by the script that will run on mikrotik, without burdening the web hosting server with the application.

Perhaps amongst of you will ask, why we need to use double router or multiple router ? so the reason is depending on your needs. Personally for me as you can see like the picture above ZTE Optical Router by ISP I have limited to manage everything to my network clients. Other than me as just the user of the ISP router that have limited to manage the router, Mikrotik is the programable router, I can manage my Bandwidth of my web hosting server amongst of other network clients as I see fit. I don’t want my web hosting server lack of bandwidth because of the internet purpose of other Pc clients on my local network.

1. The First Router Port Forwarding for TCP and UDP Protocol

In this case I am using ZTE Optical Router from ISP, I still have the access to the router as user login. I can setup port forwarding configuration of the public IP router ISP that is using port:80 to the Public IP wan interface my Mikrotik router that is using the some port:80. As you can see as the above schematic picture, dynamic public IP will be forwarding to private public IP Mikrotik that is using TCP and UDP protocol. 

Try to find port forwarding feature if your ISP is not using ZTE optical router, it should be any on many kind of the router. But if you have Mikrotik as the first router, you can add the rules on firewall NAT like this! Please change public interface name and public/wan IP that will be the second router!

/ip firewall nat
add action=dst-nat chain=dstnat in-interface=internet dst-port=80 protocol=tcp to-addresses= to-ports=80 comment="TCP port forwarding"
add action=dst-nat chain=dstnat in-interface=internet dst-port=80 protocol=udp to-addresses= to-ports=80 comment="UDP port forwarding"

It means the incoming connection that comes from public IP that is using port 80 will be forwarding to private public IP of the public/wan interface of the second router.

2. The Second Router Port Forwarding for TCP and UDP Protocol

Next we have plan to put our web hosting server as the PC client of local network of Mikrotik as the second router. We need to setup the second router port forwarding that will fowarding connection from public/wan IP on the second router Mikrotik that is using port 80 to the IP web hosting server as the client of local network second router mikrotik that is using port 8080. So we need add 2 rules on firewall NAT of the second router mikrotik like this!

/ip firewall nat
add chain=dstnat dst-address= action=dst-nat protocol=tcp to-addresses= to-ports=8080 comment="port forwarding router IP to the client"
add chain=dstnat dst-address= action=dst-nat protocol=udp to-addresses= to-ports=8080

At this time we have done to setup double router port forwarding on the two router. The condition now is if any incoming connection that comes from public IP on the first router that is using port 80 will be forwarding to the IP of web hosting server by double router port forwarding.

3. Adjustment Server Configuration on Local Network As Web Hosting Server

If you follow the previous article, its nothing different then what we have done to Build Web Hosting Server that used Single Router. Just make sure, the IP address of web hosting server should be set as the static IP on the ethernet adapter configuration of LAN related to the second port forwarding. The windows firewall should not block wamp server as the web server application, and create the rules that allow TCP and UDP Port 8080. On Apache httpd.conf of wamp server

httpd.conf  : C:\wamp64\bin\apache\apache2.4.23\conf

Find the text with “Listen” and change

Listen -> Listen
Listen [::0]:80 -> Listen [::0]:8080

Find the text with “ServerName” and change

ServerName localhost:80 -> ServerName
Find the text with “onlineoffline” and change
Require local -> Require all granted


DocumentRoot "${INSTALL_DIR}/www/agratitudesign"
<Directory "${INSTALL_DIR}/www/agratitudesign/">

phpmyadmin.conf  : “C:\wamp64\alias”

Require local -> Require all granted

4. Script for Automatic Update Dynamic Public IP to No-IP Domain on Mikrotik.

The second router Mikrotik as the programmable router that allow us to do the job like Dynamic Update Client to keep update your sub domain related to the dynamic Public IP ISP that would be changed at anytime. The System Script for Automatic Update Dynamic Public IP to No-IP will be join with system scheduler.

/system script
add name=no-ip_ddns_update policy=read,write,test source={
:local noipuser "agratitudesign"
:local noippass "Password"
:local noiphost ","
:local inetinterface "internet"
:global previousIP
:if ([/interface get $inetinterface value-name=running]) do={
:log info "Fetching current IP"
/tool fetch url="" mode=http dst-path=mypublicip.txt
:local currentIP [/file get mypublicip.txt contents]
:log info "Fetched current IP as $currentIP"
:for i from=( [:len $currentIP] - 1) to=0 do={
:if ( [:pick $currentIP $i] = "/") do={
:set currentIP [:pick $currentIP 0 $i]
:if ($currentIP != $previousIP) do={
:log info "No-IP: Current IP $currentIP is not equal to previous IP, update needed"
:set previousIP $currentIP
:local url "\3Fmyip=$currentIP"
:local noiphostarray
:set noiphostarray [:toarray $noiphost]
:foreach host in=$noiphostarray do={
:log info "No-IP: Sending update for $host"
/tool fetch url=($url . "&hostname=$host") user=$noipuser password=$noippass mode=http dst-path=("no-ip_ddns_update-" . $host . ".txt")
:log info "No-IP: Host $host updated on No-IP with IP $currentIP"
}  else={
:log info "No-IP: Previous IP $previousIP is equal to current IP, no update needed"
} else={
:log info "No-IP: $inetinterface is not currently running, so therefore will not update."

/system scheduler
add interval=5m name=no-ip_ddns_update on-event=no-ip_ddns_update policy=read,write,test comment="Update No-IP DDNS" disabled=no

Insert the script above to the new terminal winbox! the system script and scheduler should be set with policy=read,write,test. Change on the script that I have marked as red color, depending on your account and the public interface name on your mikrotik router as the second router. The system schedule will run every 5 menit as the interval that we set to execute the related system script. Then the system script will watch your current public IP, if it is changed from the previous public IP, the script will send the request to your account to update the related IP for sub domain that we have setup. But if the current public IP is not changed is nothing to send request to server.

Actually build web hosting server, its not such a big deal. It doesn’t matter, perhaps you need triple or multiple router port forwarding. We just only understand the principle Port forwarding techniques and how to make the firewall is not blocking the port forwarding process running on the server. That’s it… let’s see the video for more clearly, good job!


At this moment I am going continue my experiment in order to build Web Hosting Server as my  own self on my personal computer (PC). Web Hosting Server that I am going to build is on our PC server which is one of my PC client on my network that is using just one router port forwarding at this time. Here The equipment environment  that I used:

a. Wamp Server : Windows Web development environment with 3 packages in one, that is Apache, MySQL, PHP.  Wamp Server itself require its dependency that is The Visual C++ Redistributable Packages that must be installed before you install wamp server to make it run on windows.

b. Network Router : It is depending on your network environment of the internet connection that you have use from your ISP (Internet Service Provider). In this case the ISP using their router to provide internet connection that is ZTE optical router. But it doesn’t matter If you use Mikrotik that directly connected to Public IP of internet.

c. No-IP Account: This is for you who no have IP from ISP. No-IP means that you have no private or static public IP. Of course you have public IP but always changed at anytime. Using will make it possible to create any domain still keep related to your dynamic Public IP.

d. Website Project Files: the files of your website that you have build and need to launch so that you can access the website from outside using internet. In this case I have use wordpress for the complete example the website that using PHP and database Mysql to test Web Hosting Server that we are going to make it.

Before we begin lets take a look the image schema above! I am using the ISP router directly connected to the switch/hub before connected to the local network PC clients. The Web Hosting Server as the PC client can be connected directly to the router or use switch/hub in between if you more than one PC clients. The Web Hosting Server get the IP from ZTE Optical Router with dhcp server inside the router system by ISP. After thay we need to set the IP of Web Hosting Server to be static. We can setup or define the static IP through windows ethernet adapter.

As you can see, the Web Hosting Server as of the client local network already set to be static IP and use the IP gateway of the  local network of the router, in this case ZTE Optical router. After that we need to setup  port forwarding from the router in order to access the Web Hosting Server through public IP of our internet connection.

Ok lets begin step by step in detail how to build Web Hosting Server for Dynamic Public IP using single router. If you have different kind of the router by your ISP, try to find the port forwarding feature that allow you to setup port forwarding!

1. Get Free Sub Domain as the Domain Name your Public IP

If you have no the account yet, let you register first to make your account on, then define any sub domain that you will use as the domain name of website project that you want to launch as live web server. has nice domain name, its easy to remember. But as free user we have limited to create the sub domain on it, and has expiration date. But we still have chance to update the sub domain that we have created every month. If you have more funds you can upgrade to be premium user of the account.

As you can see, the sub domain is related to the IP target that is our current Public IP right the way. But how about when the public IP has changed. has provide the app that you must be install on one of PC clients as the client of the local internet network that still using the same Public IP.

You can download Dynamic Update Client app from the site and install it to PC client on the local network. Using this app will keep the sub domain that we have just created still related to our dynamic Public IP. Every time our Public IP is changed, this app will get our current IP and send the request to to update the sub domain IP from the previous IP to current IP of our public IP. Please keep this app running as the background.

2.  Setup Router Port Forwarding Public IP to the Web Hosting Server

Don’t worry If you have another kind of the router, try to find where the port forwarding feature is. The principle is you setup port forwarding for TCP and UDP protocol of public interface router on port 80 to the IP local network client as the web hosting server on port 8080. We can not using port 80 of the web hosting server, cause most probably port 80 on it is busy.

ZTE router is such kind of the instant or simple router. As you can see, how easy to setup port forwarding on it. But for you Mikrotik lover, perhaps ask to me, why not using Mikrotik. Ok assuming you have use Mikrotik as your router and connected directly to the external/public IP. Or maybe your ISP use mikrotik router to provide their internet connection to you. So this is single mikrotik router port forwarding rules that you must add to the nat firewall as follow:

/ip firewall nat
add action=dst-nat chain=dstnat in-interface=internet dst-port=80 protocol=tcp to-addresses= to-ports=8080 comment="TCP port forwarding"
add action=dst-nat chain=dstnat in-interface=internet dst-port=80 protocol=udp to-addresses= to-ports=8080 comment="UDP port forwarding"

We require two rules on firewall nat, change in-interface name, it depends on public interface name on your mikrotik configuration. So that we also create port forwarding for TCP and UDP protocol. 

3. Installing Wamp Server According to Public IP and Port Forwarding

The process for the Installation of Wamp Server on windows its not such a big deal that I should be explain explicitly. Just go immediately to, then you can download Wamp Server for the latest version that now is including with php 7.0.10. Don’t forget before install Wamp Server, you must be install its dependency Visual Studio 2012 : VC 11 vcredist_x64/86.exe

After this you can install Wamp Server itself, before finish the installation, I suppose you to allow Apache http server of Wamp Server running on private and public network on the app windows firewall. Remember we have plan to access Wamp Server as Web Hosting Server through public IP or external IP. So we don’t want app windows firewall blocked Wamp Server.

 4. Adjust Wamp Server Configuration and Windows Firewall Rules

We have done to create port forwarding rules on the router, but our job is not finish yet, still need to Add Windows Firewall rules for TCP and UDP port on windows firewall with advanced security and adjust Wamp Server Configuration.

Adjustment Windows Firewall:

It is the very common way but its required. Most probably we fail in building web hosting server because of it, so that we need to add 2 rules to the port 8080 for each TCP and UDP protocols on windows firewall with advanced security like the picture below!

And don't forget to make sure that Wamp Server is allowed to communicate through windows firewall as private and public on app windows firewall like the picture below!

Adjustment Wamp Server Configuration:

Before we adjust Wamp Server Configuration, let you check everything is working properly. Run Wamp Server App and make sure Wamp Server System Tray Icon should be green.

Type localhost,, and The IP address as you set as static IP for the server, all should be able to access from your browser to open Wamp Server.

After that you begin to find httpd.conf of Apache configuration file on Wamp Server installation directory. It is according to the place where you put the Wamp Server installation files on your PC. “C:\wamp64\bin\apache\apache2.4.23\conf”. Open httpd.conf with your favorite editor then

Find the text with “Listen” and change

Listen -> Listen
Listen [::0]:80 -> Listen [::0]:8080
Find the text with “ServerName” and change
ServerName localhost:80 -> ServerName

Find the text with “onlineoffline” and change

Require local -> Require all granted

For phpmyadmin of Web Server in order to access it through public IP, find phpmyadmin.conf on Wamp Server installation directory “C:\wamp64\alias”. Open phpmyadmin.conf and change

Require local -> Require all granted

This is just an option, in order to access the web project directly rather then access directory root www just by typing public IP or domain name. We need to set DocumentRoot and Directory, still on httpd.conf like this:

DocumentRoot "${INSTALL_DIR}/www/agratitudesign"
<Directory "${INSTALL_DIR}/www/agratitudesign/">

"agratitudesign" is a directory name of the web project files

You have done to adjust Wamp Server Configuration according to router port forwarding. Then you need to restart all the wamp server services, you can do it from Wamp Server System Tray Icon. Everything should be working properly. At this you can access Wamp Server through public IP or your sub domain that you have created on 

4. Adjust Wordpress Sites from Localhost to Live Web Hosting Server

In this case I am using Wordpress CMS as the example of the Website Project that uses database to work with. Its so many tutorial about how to install wordpress, here I just explain  how to adjust Wordpress Website from local configuration to the live web hosting server configuration. Our aim is to test the Web Hosting Server that we have just created.

Ok assuming that you have build Website Wordpress Project to the directory “www” as default document root of Wamp Server. In this example is agratitudesign directory, and I have been move the document root to this directory itself. So that we can access agratitudesign web project just by typing the subdomain of, that is or If you don’t how to install wordpress please watching the video of this tutorial for more details.

The most important that I have to tell you, consider that our Wamp Server its not localhost that only can be access from you’re the PC server, but now is the live server that can be access anywhere as long as connected to the internet. Usually we leave “localhost/phpmyadmin” with user root with no password. Imagine that someone type “yoursubdomain/phpmyadmin” they can access the website database with the common login like this. So we are going to create a new login for phpmyadmin of Wamp Server

Create a new user login for phpmyadmin don’t forget activate all global privileges for the user login, after that you can remove the root login, because almost everyone already knows as the default user login for phpmyadmin on windows.

So when we build website wordpress project, we have database name of the site, user login for the database, user login for admin backend for that wordpress site. As usually we do, when we move wordpress project from local to the live web hosting server, we need to adjust wp-config file of wordpress site files

After that we login to the database of this wordpress site, by typing “subdomain/phpmyadmin” with the new login that we have just created. Open the database of the wordpress site and find “wp_options” table and change siteurl and home from localhost to subdomain that we have. Lets see the picture below!

Most probably wordpress website was using hyperlink refers to localhost but now we must change ro subdomain. It would be very painful to do manually one by one to check the database tables. Go to the related database and on SQL tab we insert sql query as follow

UPDATE wp_posts SET post_content = REPLACE(post_content, 'localhost/agratitudesign', '');

The last is go to wp-admin of the backend wordpress website then select setting > permalinks and update the permalink on the backend.

Well done we have successful to build web hosting server by own self on our local network using dynamic public IP and single router. I have already test the subdomain access, admin backend of wordpess site, the database. Everything is working good, and finally Web Hosting Server is own hands. For more clearly lets watch the video, see you!


Basic understanding GitHub Project Repositories and Implementations
GitHub is the most popular for website server hosting project files that based on Git repository system, which offers all of the distributed revision control and source code management (SCM)  as the social coding of the project files server. Github allow you to work on the project files and collaborate between you and your group to build a new release projects. Using version control system, Github is like subversion system when you usually use  google code SVN project hosting.
1 comment
Are you a blogger who is very much concerned about the one of blog component? When a blog or a website already has a lot of visitors, many people want to put the links to your blog or website. One which became users or spammers targets who want to take advantage of our blog / website is the comment component. When comments are not equipped with rel="nofollow" inside anchor link. This is a great opportunity for users and spammers who want to increase the page rank of their url in our page rank.
1 comment

Quick Search JSON on Blog Posts Own Search Box

These are some reasons why I use the method of Quick Search using JSON rather than Google CSE. When I was using google CSE then I have inserted any keyword on my search box, there were any results was not relevant appeared, could even appear in the first result, and some image thumbnails that appeared sometimes was not appropriate (inaccurate). I don't know why did this happens. Especially for some of the newest articles that have not been indexed by google, it was not found on the search results, such the articles does not exist on my blog, so it must wait until indexed by google. Meanwhile if I was using Google Blog Search of the basic gadget blogger, the search result very appropriate, i like it, but I have limited to put the search box style on my template where I want it to place. This is why I chose Quick Search using JSON in addition also search process more quickly and the display of result could be more elegant.
Joomla Image Lightbox Evolution to All Images Joomla
After successfully implementing the image lightbox evolution into the blog content, then I have though how to apply it to the joomla website. As you probably know a lot of extensions that provide convenience to you in making the image lightbox effect, but I think none more impressive than the lightbox evolution. Therefore, it is dedicated to you who use joomla to build your website as your choice, I will describe the implementation of image lightbox evolution to the joomla website automatically to all images of the joomla content.
Back to Top