Introduction to Installing Web Apps.
by Computothought in Circuits > Linux
21773 Views, 19 Favorites, 0 Comments
Introduction to Installing Web Apps.
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/
The Root.
Creating a Simple Web Page.
[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.
Let's Set Up a Menu Page.
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.
Reusing Code.
[code]
[/code]
Downloads
Adding an Application With Several Files.
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
Downloads
Simple Lamp Application Install.
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
Setting Permissions and the Database.
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.
Now to Install the Software.
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.
Intro to 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.
Editing a Web Page Remotely.
https://www.youtube.com/watch?v=xD9pzmuybPk
Troubleshooting.
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.
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
#===============================================================
Bonus: Using a Blogger As a Web Page Editor. (under Construction)
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.
You Need an Account.
Images.
Get Into Your Blogger Account.
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.
Look at Your Work.
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>
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.