Introduction: Introduction to Installing Web Apps.
Web applications are a boon to the computing environment. Traditionally you would load computer software applications locally on every system. Even with automated software deployment systems, can still be support intensive. With web applications you can load applications just once on a server and let all users access the applications as they need them via a web browser. You also only have to update only one system as improvements to software become available. This can be a tremendous savings in support time devoted to software deployment. Examples of web applications that can be used for small business can be found at: https://www.instructables.com/id/Uses-for-your-own-private-cloud/.
Where do you get such software? You can develop web applications yourself (and or even use open source code from existing sites where permitted i.e. no copyright or patent encumbered code), purchase web applications, and downland then install free (aka open source applications). Sourceforge.net is a good source for applications. Be careful as some applications that say they are open source are really not open source. You have to read the fine print.
Note: This instructable requires some knowledge of the linux command line, basic html, a Lamp (Linux, Apache, Mysql, PHP) based web server and administrative rights to the server via sudo.
Try this instructable also: https://www.instructables.com/id/Linux-screen-play/
After doing this instructable, you might also like: https://www.instructables.com/id/Statusnet-the-Twitter-clone-setup/ and or https://www.instructables.com/id/eyeOS/
Step 1: The Root.
For a web server to display content, there must be web pages ( files with data and or instructions) that the web server can use for the web server to display. Index.html (or index.htm) is the usual file name for the default file a web server will look for when displaying web pages. Usually but not always the index.html will go into what is called the web root. This is where the web server expects files to be when serving out files. Of course this directory can be changed. On a lamp server, the web root or base web directory is /var/www. You do not have to do it but, we like to use the index.html file in the web root (/var/www/index.html) as a sort of menu or card catalog of what is on the server.
Step 2: Creating a Simple Web Page.
This is probably the world's simplest web page. You will want to save it to a plain text or what is known as an asci file. www.w3schools.com is a good place to learn about web programming.
[code]
<html>
<body>
Hello world!
</body>
</html>
[/code]
You will want to log into your web server and create a directory for your web page.
$ sudo mkdir /var/www/hw
Create your web page.
$ sudo nano index.html
(s/b sudo nano /var/www/hw/index.html) You can always move it if you need to.
$ sudo mv index.html /var/www/hw/.
Now use your web browser to see your work. ( if you are not sure of a host name just use the server's ipaddress. Tada, you have done your first web page! You may want to bookmark this page as we will continually come back to it.
Step 3: Let's Set Up a Menu Page.
A menu page (a sort of table of contents) will allow you to organise you web pages or projects so they are easier to get to. This allows you to not to have to remember where your pages are. You can easily navigate to each project or page from the main menu.
You will want to rename original html file to hw.html so you can use it later.
$ sudo mv index.html hw.html
Let's create a new index.html file
$ cd /var/www/hw
$ sudo nano index.html
[code]
<title> Hello World Page </title>
<body bgcolor="aquamarine">
<CENTER><h2><B><I>Hello World!</I></B></h2></CENTER>
Press a button to go to that page:
<form ACTION="pport.html" method="post">
<p>
<input type="submit" value="pport">
</form>
<br>
<br>
</body>
</html>
[/code]
You will want to copy over your own html file or someone else's file (with permission from them) to your server. The you will want to copy it to the proper directory that you are using.
(at local machine)
$ scp pport.html 192.168.1.129:~/.
Then mv it to the proper directory:
(at server)
$ sudo cp pport.html /var/www/hw/.
Open a browser and using you bookmark, look at the menu an press on the button to go to your new page. Neat.
Now you want to use your hw.html file in the menu, so you will need to add a section.
[code]
<html>
<title> Hello World Page) </title>
<title> Hello world </title>
<body bgcolor="aquamarine">
<CENTER><h2><B><I>Hello World!</I></B></h2></CENTER>
Press a button to go to that page:
<form ACTION="pport.html" method="post">
<p>
<input type="submit" value="pport">
</form>
<form ACTION="hw.html" method="post">
<p>
<input type="submit" value="Hello world">
</form>
<br>
<br>
</body>
</html>
[code]
Close the old browser, then open a browser and using you bookmark. look at the menu and press on the button to go to your new page. Super neat!!. Now you have a menu page you can add more apps to.
Note:
"value" is what is shown on the web page for you to click on. This is commonly known as a label.
"form action" allows you to point to the page referenced by the label to go to if that button is pressed.
Step 4: Reusing Code.
You can always reuse code either your own or code your allowed to reuse. Here is part of a menu I used and reused. Of course, you will have to change the captions.
[code]
[/code]
Step 5: Adding an Application With Several Files.
Sometimes you will get access to a simple web application but it has multiple files. In this case the procedure is pretty much the same almost.
On the server prepare a directory to get the files you need.
$ mkdir ~/hangman
On your machine you will want to send the downloaded files to the server.
$ scp -r * 192.168.1.129:~/hangman/.
hangman_0.gif 100% 661 0.7KB/s 00:00
hangman_1.gif 100% 793 0.8KB/s 00:00
hangman_2.gif 100% 846 0.8KB/s 00:00
hangman_3.gif 100% 975 1.0KB/s 00:00
hangman_4.gif 100% 1067 1.0KB/s 00:00
hangman_5.gif 100% 1032 1.0KB/s 00:00
hangman_6.gif 100% 1222 1.2KB/s 00:00
hangman.php 100% 7205 7.0KB/s 00:00
You will need to copy the files over to the hw directory.
$ sudo cp ~/hangman/* .
$ ls
hangman_0.gif hangman_3.gif hangman_6.gif index.html
hangman_1.gif hangman_4.gif hangman.php pport.html
hangman_2.gif hangman_5.gif hw.html
Getting kind of crowded now.
Now you will want to add a new section to your index.html.
$ sudo nano index.html
add the following code with the rest of the items.
[code]
<form ACTION="hangman.php" method="post">
<p>
<input type="submit" value="Hangman game">
</form>
[/code]
Close the web browser and reopen it to the same old page (unless you know how to refresh a page).
Woopie
Attachments
Step 6: Simple Lamp Application Install.
Most any generic web server would have supported what we have done so far. Now we need a server that also has unzip, mysql, php, and to make things easier phpmyadmin. For this, you will need root access to the mysql server. This is different from the system root access. You will need to know the mysql root password. Usually when I set up a system I make a backup mysql user that also has root access so If I forget my password I can always go back and use the root user to fix things.
Most web installs (but not always) come in several parts. Creating a web directory for the files to have a home plus the user rights for that directory, setting up and empty database (sort of a file cabinet for the web application), install the files after expanding an archive, run (i.e. install) a script to set up the databases and populate it.
Most web apps come in two forms tar.gz or zip file format. I usually get the zip format if I can to make things easier for a novice. I have chosen the Wordpress blogging software as the guineapig for this instructable. Available from https://wordpress.org/download/. So download that file and move it over to your server. I have shown you how to do that already.
If you do not already have a temp directory on your server you will have to create one.
(at server)
$ mkdir ~/temp
(at local machine)
$ scp wordpress-3.1.1.zip oesrvr1:~/temp/.
wordpress-3.1.1.zip 100% 3024KB 3.0MB/s 00:00
(at server)
Now we need to expand it
$ cd temp
$ unzip wordpress-3.1.1.zip
That should make a wordpress directory in temp. Now we need to rename it and move it to the web directories.
$ sudo mv wordpress wp311
So I will remember what version I started with.
Now move it to the web directories. This creates the directory. (part 1)
$ sudo mv wp311 /var/www/.
Go to that directory and read the install instructions. (links2 is great for looking at web pages via the command line)
$ links2 readme.html
Step 7: Setting Permissions and the Database.
We want to do a little preliminary work so that the web user can use the application.
Set permissions: (www-data:www-data is the web user)
(at the server)
$ cd /var/www
$ sudo chown -R www-data:www-data wp311
$ sudo chmod -R 755 wp311
You may want to change this after install.
Set up the database. (part 2).
Open up a web browser to the server's phpmyadmin page and log in as the mysql root user with the mysql root user password. (This is not always the same as the system root user).
Click on the privileges tab. You will get a new page.
On the bottom of that page click on new user. You will get a new page.
On the new page, enter the username and password. (WRITE DOWN THIS INFORMATION AS YOU WILL NEED IT LATER).
(DO NOT CLICK ON GENERATE PASSWORD).
Host should be local (localhost).
Click on "" (DO NOT CLICK ON ANY OF THE GLOBAL PRIVILEGES OR YOU WILL HAVE SECURITY ISSUES.)
Press on "Go" at the bottom of the page. You will get a new page.
It should say you have created a new user.
Click on the privileges tab. You should get a new page
Click on reload the privileges. After that is done, you can log out.
When you have gone back to the login page, you can close the window,
Note : corrected permissions from 744 to 755.
Step 8: Now to Install the Software.
Now that you have the filing cablinet set up, it is time to install the application. (part 3).
Open your browser to webservername/wp-admin/install.php. Read the page and take note. press let's go.
Go ahead to the setup page and enter the information that you entered in phpmyadmin. Do not worry about the table prefs. Because we clicked on set up a database as the same name of the user the first two lines will be the same. Submit
Press "run the install".
Now you have to set up the admin user for the wordpress blog. (not the same as any of the previous users. in fact it is a good idea not to use admin ad the admin name for security reasons. (BE SURE TO WRITE DOWN WHAT YOU PUT HERE IN CASE YOU FORGET.)
Wordpress will let you know how secure your password is. You need it very secure or someone can guess it and log in as you. You really need an email address in case you need your password sent to you. Press install wordpress.
If all goes well it will say login and remind you of the admin user name, press "login".
Login.
You will be at the login page where you can modify your blog. Notice the blog page for the admin is different for the average user. the average user does not need all the options for security reasons.
You have set up your own web blog. Enjoy
P.S. Do not forget to add Wordpress to your web server menu.
Step 9: Intro to Cgi-scripting.
Last topic: CGI scripting.
Probably to advanced for an intro, but at least here is a starter at it. See https://www.instructables.com/id/Linux-beginning-home-automation-on-a-server/ for more detail on that. See also: https://www.instructables.com/id/Simple-linux-commands-from-a-web-page/
You should have enough information to wet your palette for web pages. so far we have only barely scratched the surface.
Step 10: Editing a Web Page Remotely.
https://www.youtube.com/watch?v=xD9pzmuybPk
Step 11: Troubleshooting.
Just installed a new program on the web server called cookdojo and was prompted with the "could not connect" web page. Very disconcerting as you usually get some kind of webpage to do the install of the software. When you see could not establish connection, it can throw you for a loop. What do you mean you could not establish a connection. I can see I am connect to the server i think. What is really happening is that you are connecting to the web page, but you are not connecting to the database that runs in the background to support the web page.
You need to look at the documentation to see what is going on. What this usually means a confituration file does not have the correct information about access to the database. Sure enough, when I looked at that page there was some incorrect username password and database name. We corrected it and viola reloading the page and all is well.
Note: The cooktest page was just temporarily used used to re-show the connection error. The cookdojo page is the actual page in use after making corrections.
Step 12: Installing a Web App From the Command Line.
Wrote this several years ago so it may need to be adjusted.
http://computothought.wordpress.com/2009/02/04/advanced-topic-ii-adding-web-apps/
#==========================================================================
# pseudo-code or generic instruciions to set up a lamp web server apps on
# Debian based lamp servers you will have to modify it to your needs.
# this is assuming a lamp server is already properly set up.
# Setup is another discussion.
# all rights unreserved by the unknown admin
#**************************************************************************
# Get file from internet chances are you visited the sit and have the
# location of the file to be downloaded.
# use Curl for a directory or wget for a single file. use the man pages for
# additional instructions
wget $website/$subdirectory/$filename
# Extract the file in the home directory (not the destination filename for use
# in the next step.
tar zxvf filename.tar.gz
# move te directory into the web document root for use with http
# webappdirectory will become webappname
sudo mv webappdirectory /var/www/
# if you do not have this directory then a server is not setup
# to set up lamp server:
# sudo aptitude install lamp-server
# or
# sudo apt-get update
# sudo apt-get install lamp-server
#***************************************************************************
# set up your database and create user to manage it.
# Courtesy of Linux Reality home server series by Chess Grffin
mysql>
# When entering commands at the MySQL prompt, you must must have a
# semicolon at the end of each line before pressing Enter.
# To create a database, do the following at the MySQL prompt:
mysql> CREATE DATABASE wordpress;
# This will create a database called “wordpress.” The next step is to
# create a separate non-root MySQL user with a password and to grant all
# privileges to that non-root user. This can be done all in one step as
# follows:
mysql> GRANT ALL PRIVILEGES ON wordpress.* TO ‘bloguser’@'localhost’ IDENTIFIED BY ‘abcd’;
# (That is all on one line.)
# Then, do the following:
mysql> FLUSH PRIVILEGES;
mysql> EXIT;
# You will then be back at the regular command prompt.
#*******************************************************************************
# Set permissions for web app directory. (this will vary from app to app)
# read the instructions for the webapp to be sure
# see http://www.draac.com/chmodchart.html for more details
sudo chown -R www-data:www-data /var/www/$webappname
sudo chmod -R 755 /var/www/$webappname
#*******************************************************************************
# test web application
# http://localhost/webappname
# apps may make you go to a special directory first for an install process
links2 http://localhost/webappname
# i.e http://localhost/webappname/install or http://localhost/webappname/config# io finito
#===============================================================
Step 13: Bonus: Using a Blogger As a Web Page Editor. (under Construction)
Sometimes as a technician I need to create web or html file. Usually I am at a site where the do not have one on there system. Here is a way to a simple web page and then use it almost immediately for the employee training and or notices..
Usually it is a good idea to see that the picture looks like in the full form. Good idea to get the image url for use later. Maybe even save it in a text file for later so you do not have to forget the file name.
Note: you will probably want to create a more informative page. The picture was just for demo purposes only.
Step 14: You Need an Account.
If you do not already have an account at blogger.com, you will need to get an account at Blogger.com
Step 15: Images.
You may also want to include images in your page, but do not want to store tham at blogger. You can to to imageshack and up load your picks so they can be used anywhere. Directions are easy to follow to upload a file at the site.
Step 16: Get Into Your Blogger Account.
You will want to log into your blogger account and start a new post. There is no reason to publish it. Just save it as you need to.
You will want to go to the compose mode so that you get all the tools.
Start creating you document.
When you are done go back to the html mode. Notice the lots of extra characters. You will want to copy everything so that you can copy it into a file to save it.
Paste what you copied into an editor. For older browsers you may want to add the html and body tags. You could also add any last minute changes also. Save your work with an html or htm extension. That way you can load/view it into the browswer easier.
Step 17: Look at Your Work.
Now load the file you created/saved into your web browser and see your work.
Step 18: Backing Up Your Web Page.
$ wget -c -r www.whateverthesitenameis.com
The command will recursively get all of the website it can and stay on top of getting the site till it is done. So then (if your computer supports long file names), you would have a directory called www.whateverthesitenameis.com. Cool.
You can go to www.archive.org and also have them archive the site for you! Great for your instructable projects also.
Then I thought about it and wanted to go one step further. That is directly put the files on another local server so I could access them at will. Also did not want to interfere with the existing web pages. So we need an Apache web server that supports virtual hosts. On that server where you have admin rights, you want to set up your web directory such as:
$ cd /var/www
$ sudo mkdir -p www.whateverthesitenameis.com/html
Then let’s get the files.
$ cd www.whateverthesitenameis.com/html
$ sudo wget -c -r www.whateverthesitenameis.com
Now we need to let the server know about the new site. We need to come up with a site name that is not either used or one you can use with a viable dns address. Your network will probably use the net address first and not find your local site, use an unused url and put it in your local dns with the local servers ipaddress. Let’s substitute a new name such as www.mysitebackedup.com. We will need to make a file with that name on the apache server in the sites-available directory in the Apache2 file structure. i.e.
$ sudo nano /etc/apache2/sites-available/www.mysitebackedup.com
[code]
ServerName www.mysitebackedup.com
ServerAlias www.mysitebackedup.com
ServerAdmin me@there.com
DocumentRoot /var/www/www.whateverthesitenameis.com/html
[/code]
(file attached. Instructables html interpretation cut out part of the file)
Then you need to make a link to the that file in the sites enabled directory.
$ cd /etc/apache2/sites-enabled/
$ ln -s ../sites-available/www.mysitebackedup.com .
(Do not forget the space and then the period.)^^^^^
Then you need to restart the server to let it have the updates and the details of the new site.
$ sudo service apache2 restart
You should be able to reach your local site now if the local dns has been updated for the new site. I did have to disable use proxy in my Firefox to see the site. Any time you need to update the site, just go back to the same directory and run the wget command again. You also will have to modify the links in the source code to go to prior pages.
-----------------------------------------------------
<VirtualHost 192.168.1.61:80> ServerName www.mysitebackedup.com ServerAlias www.mysitebackedup.com ServerAdmin me@there.com DocumentRoot /var/www/www.whateverthesitenameis.com/html </VirtualHost>
Step 19: The Arduino.
Normally your would not install web applications on the Arduino, but you can use html in the web server sketch. Took the web server sketch and added a little window dressing to allow it to be a bit better looking. Attached is the code I used. You can even add graphics if you link them from another site on the web.
