Category: Reference

Tomcat Base Setup With PHP Support

Tomcat Base Setup With PHP Support

Tomcat is an awesome server when wanting to run local webapps or have a LAN server. But, getting it setup can be a little confusing at first go. This tutorial will show you the common things to look at as well as change to get a functional Tomcat server. In addition, at the end of this, you will be able to run PHP scripts from Tomcat too. So, first things first, we need to download a few programs to get started. They are Tomcat, PHP/Java Bridge, and PHP-CGI.

Downloads

*** Note: We need two JARs that comprise PHP/Java Bridge. Simply go to the most recent version of the application under “Binary package” and then go to the “exploded” folder. From there, right-click each JAR link and do “Open Link In New Tab”. Then go to each tab so the page will load and begin downloading the JAR.


Setup

OK, having everything we need, extract Tomcat to wherever you want to store it. I have a specific directory were I hold self-contained applications. Make sure to name the Tomcat folder to something more readable than its original name and we’re good to go. We next need to move the two JARs to their new home, edit the proper config files, and start Tomcat.

Move to the freshly extracted Tomcat folder and go to the “lib” folder. Copy or move the two JARs you downloaded for PHP/Java Bridge to this location. Then, go up one directory and go to “conf”. Edit the following files (“server.xml”, “tomcat-users.xml”, “web.xml”) with the below information.


server.xml

Find the “Connector” that has port 8080 and change it to the following:

<Connector port="1120" protocol="HTTP/1.1"
           connectionTimeout="20000"
           redirectPort="8443"
           address="0.0.0.0" />
*** Note: You can leave the port value as is or use your own.
*** Note2: The “address” value isn’t needed unless you want to make your server available for your LAN or the Internet. You can even set it to 127.0.0.1 which means localhost so that you can come back and change it later.


tomcat-users.xml

For the users file, add a new user outside of the commented out text but still within the “tomcat-users” tag. Mine looks like the following:

<user username="toor" password="root" roles="manager-gui, admin-gui"/>
*** Note: These roles should only be available to the admin or not included.


web.xml

For the web file we need to add the proper information for PHP to work on our Tomcat server. We are also adding a “welcome-file” entry for index.php. So, first, add the following right after the opening “web-app” part.

<!-- PHP FOR TOMCAT -->

<listener>
    <listener-class>php.java.servlet.ContextLoaderListener</listener-class>
</listener>
<servlet>
    <servlet-name>PhpJavaServlet</servlet-name>
    <servlet-class>php.java.servlet.PhpJavaServlet</servlet-class>
</servlet>
<servlet>
    <servlet-name>PhpCGIServlet</servlet-name>
    <servlet-class>php.java.servlet.fastcgi.FastCGIServlet</servlet-class>
    <init-param>
        <param-name>prefer_system_php_exec</param-name>
        <param-value>On</param-value>
    </init-param>
    <init-param>
        <param-name>php_include_java</param-name>
        <param-value>Off</param-value>
    </init-param>
</servlet>
<servlet-mapping>
    <servlet-name>PhpJavaServlet</servlet-name>
    <url-pattern>*.phpjavabridge</url-pattern>
</servlet-mapping>
<servlet-mapping>
    <servlet-name>PhpCGIServlet</servlet-name><url-pattern>*.php</url-pattern>
</servlet-mapping>
Then, scroll all the way down to where “welcome-file-list” attributes are set and add the following:
<welcome-file>index.php</welcome-file>
We are now ready to launch Tomcat and do some initial cleanup and setup.


Tomcat Start & Initial Setup

Tomcat Start

To start Tomcat, simply go up one directory and go to the “bin” folder. From there, on Linux, make sure “catalina.sh” is set with proper execute permissions. You can do it through the file manager or the command line. For the command line it is as follows:

chmod +x catalina.sh
On Windows, everything is already set for you. OK, let’s actually start Tomcat. To do this, open your terminal and move to the “bin” folder. Then execute the following based on your system:
*** Linux
./catalina.sh start

*** Windows
.\catalina.sh start
To stop it:
*** Linux
./catalina.sh stop

*** Windows
.\catalina.sh stop


Tomcat Manager & Tomcat Webapps

Now that Tomcat is running, go to localhost:<your-port> in a new Tab. It will load the Tomcat “Welcome Page” which has links to admin tools, doc pages, and example apps. Click on “Manager App” and if prompted enter the user and password you setup just a moment ago. From there, remove the examples app by clicking its “Undeploy” button if you don’t want it taking space. Keep the page open but open your file manager and go to Tomcat’s “webapps” directory. Once there, re-name the “ROOT” folder to “welcome” (without the quotations). Then, create a new folder and name it “ROOT” (again, without the quotations). Copy the “WEB-INF” folder from the “welcome” app’s folder to “ROOT”. Then, edit the “web.xml” to more appropriate entries for “display-name” and “description”. At this point, everything is setup as it should be and you are ready to test whether PHP is working on Tomcat. Though, before we do that, let’s restart Tomcat by stopping it and starting it again.


Testing PHP

To test PHP on Tomcat go to the “ROOT” folder and from there create an “index.php” file. Enter the following:

<?php 

echo "Hello World!";

?>
Go to localhost:<your-port> OR if you have manager still open press on your keyboard Ctrl+F5. This will clear the page cache and refresh the page. You should see in the “Path” column one that is “/”. Press it and it’ll do the same as opening localhost:<your-port> by opening the “ROOT” app. You should see “Hello World!” load up.


Conclusion

And you’re done! You can now use Tomcat to create webapps with Java or PHP or even both! At this point, it might be useful to setup proper SSL so certain local applications have proper security. But, this will be for another time.

Star Wars: Battlefront 2 (Classic) – Wine Patch

Star Wars: Battlefront 2 (Classic) – Wine Patch

Star Wars: Battlefront 2 (Classic) on Linux PC is great but can be better. Here is a useful Wine patch to play the game properly.

HTML Fun & Random Tutorial

HTML Fun & Random Tutorial

I wash watching a show and it had a scene with a challenger board that had a honeycomb pattern in it with a gradient. I randomly thought to myself that I could do that with HTML and even animate it if I wished. So, for giggles, I decided to do just that and make a quick tutorial about it.

naruto_challenger_board
naruto_challenger_board

Thought Process

Let’s first cover my thought process. I immediately thought that I could do this with a PNG that had a honeycomb pattern. It’s cells would be black with the lines being transparent. From there, I could use CSS’s linear-gradient to get the two colors in the image. Doing some googling got me a tillable honeycomb image but I did have to use Gimp to get the transparent parts and color exchange from white to black. Here is the end result of that: Honeycomb Image From there all I had to do was get two divs and set one of the with the image as the background and the other as a linear-gradient. OK, so we are set with the logic. Let’s look at the CSS.

CSS

The CSS is pretty straightforward. We first make sure that the entire page is filled when we have our elements in it. So, we set padding and margins to zero for the html and body tags. We then define some base parameters for our two core div elements. I identafy them with IDs and they are overElm and underElm. We simply set their width and height settings to 100%. In addition, we set their positions fixed so that we can use z-index to place them in the proper top and bottom order.

Now, the overElm has its background set to url(“honeycomb.png”); and repeat is set for both x and y ordinates. Then, underElm has its z-index set to -100 to make certain it is below overElm. That covers the CSS section. We will do one other CSS related thing but it will be referenced in our JavaScript section. Let’s cover our body tabs we need.

html, body {
    margin: 0em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
}

#overElm, #underElm {
     width: 100%;
     height: 100%;
     position: fixed;
}

#overElm {
     background-image: url("honeycomb.png");
     background-repeat: repeat;
}

#underElm {
    z-index: -100;
}

 

Tags

This part is super straightforward and so we an quickly go to the JavaScript section in a moment. Here is the breakdown. We have two div tags and they each have their respective IDs. See? Easypeasy. See below:

<div id="overElm"></div>
<div id="underElm"></div>

 

JavaScript

OK, this is the most meaty part of the logic. We are going to use the setInterval JavaScript function and to create the animation. In addition, we will check to see if we want an animation at all. Before we do this we want to create a number of variables for use.

First, we get the element reference for underElm. Then, we create two color variables to be used in our linear-gradient setting. In addition, we create two color percent variables in order to drive how much gradient there actually is. Here we will use 50% for both so that they equally consume space and that there actually isn’t any gradation.

We also will create a degree variable and interval rate variable. Interval rate will dictate if we want to have a static color split or animated one. From there, we setup an if check and see if our interval rate is less than 0. If it is, it sets a static linar-gradient. Or if greater than, it will animate via the setInterval function. We pass our arguments to it for usage. And we are done! You can chnge the clors, its opacity, speed, and more to get a cool look for an HTML page or even video if you manage it right. Full code and video is below.

var elm = document.getElementById("underElm");
var color1        = "#09c759";
var color2        = "#c82f46";
var color1Percent = "50%";
var color2Percent = "50%";
var degInt        = 45;
var intervalRate  = -1;  // - number means do static than intervaled degree change
                         // 20 is nice and fast  500 is gradual and lower

if (intervalRate < 0) {
    elm.style.background = "linear-gradient(" + degInt + "deg,"
                           + color1 + " " + color1Percent +","
                           + color2 + " " + color2Percent + ")";
} else {
    var interval = setInterval(function () {
        elm.style.background = "linear-gradient(" + degInt + "deg,"
                               + color1 + " " + color1Percent +","
                               + color2 + " " + color2Percent + ")";

        degInt = (degInt <= 405) ? degInt += 5 : degInt = 45;

    }, intervalRate, elm, color1, color1Percent,
                          color2, color2Percent);
}

 

Full HTML & Code

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Honeycomb Gradient</title>

        <style media="screen">
            html, body {
                margin: 0em 0em 0em 0em;
                padding: 0em 0em 0em 0em;
            }

            #overElm, #underElm {
                width: 100%;
                height: 100%;
                position: fixed;
            }

            #overElm {
                background-image: url("honeycomb.png");
                background-repeat: repeat;
            }

            #underElm {
                z-index: -100;
            }
        </style>
    </head>
    <body>
        <div id="overElm"></div>
        <div id="underElm"></div>

         <script type="text/javascript">
             var elm           = document.getElementById("underElm");
             var color1        = "#09c759";
             var color2        = "#c82f46";
             var color1Percent = "50%";
             var color2Percent = "50%";
             var degInt        = 45;
             var intervalRate  = -1; // - number means do static than intervaled degree change
                                     // 20 is nice and fast  500 is gradual and lower

             if (intervalRate < 0) {
                 elm.style.background = "linear-gradient(" + degInt + "deg,"
                                        + color1 + " " + color1Percent +","
                                        + color2 + " " + color2Percent + ")";
             } else {
                 var interval = setInterval(function () {
                     elm.style.background = "linear-gradient(" + degInt + "deg,"
                                            + color1 + " " + color1Percent +","
                                            + color2 + " " + color2Percent + ")";

                     degInt = (degInt <= 405) ? degInt += 5 : degInt = 45;

                 }, intervalRate, elm, color1, color1Percent,
                                       color2, color2Percent);
             }

         </script>
    </body>
</html>

 

Video

 

Email-to-SMS Gateway List With Setup & Code Example

Email-to-SMS Gateway List With Setup & Code Example

email_to_sms
email_to_sms

For personnel projects, one might need to send a message to a phone to give updates or alerts. This can be done relatively easily by using PHP and its “mail()” command. But, we need to know what gateway to send it to and what the number is. The number part is easy but gateways vary. So, here is a reference list of Email-to-SMS Gateways. In addition, there is a quick code reference part to help get the ball rolling. As a final point before starting, you will need a proper mailing system and FQDN to make sure messages get through. Some gateways are highly fickle and you might not always get the SMS sent through using this setup. So, don’t use this in a commercial context unless you do the aforementioned.

Code Reference:

First, you’ll need the program “mail()” uses to send messages. In a terminal do:

sudo apt-get install sendmail

Then, edit the host file found at /etc/hosts. You’ll have something like this at the top: 127.0.0.1 localhost. You need it to be setup the proper FQDN syntax; so, something like this: 127.0.0.1 localhost.example.com is needed. After all that is setup (You might need to reboot.) you simply need to insert into a PHP script the following:

$number   = "[email protected]";
$subject  = "Your sybject message here.";         // Not used in text messages per say
$tmessage = wordwrap("Your message here.", 70 );

mail($number, $subject, $tmessage);

Gateway List:

Cell Carrier Email Domain
AT&T Enterprise Paging page.att.net
AT&T Wireless txt.att.net
Alaska Communication Systems msg.acsalaska.com
Alltel  text.wireless.alltel.com
Now part of AT&T
Australia T-Mobile/Optus Zoo (Optus) optusmobile.com.au
Appears they charge for the service
Bell Mobility & Solo Mobile txt.bell.ca
Bluegrass Cellular sms.bluecell.com
Boost Mobile myboostmobile.com
Cellcom cellcom.quiktxt.com
Cellular South (C Spire) cellularsouth1.com
(now cspire1.com)
Centennial Wireless cwemail.com
Cincinnati Bell gocbw.com
Cingular cingular.com
Merged with AT&T Mobility 2007
Cingular Prepaid cingulartext.com
Cox Wireless Discontinued 2012
Cricket Wireless mms.cricketwireless.net
Digicel St. Lucia digitextlc.com
Fido fido.ca
Google Voice Not an actual carrier
GCI Alask Digitel (GCI) mobile.gci.net
IV Cellular (Illinois Valley Cellular) ivctext.com
i wireless (iWireless) iwspcs.net (T-Mobile)
iwirelesshometext.com (Sprint PCS)
Koodo Mobile msg.telus.com
Lime txt2lime.com
Metro PCS mymetropcs.com
Mobilicity No email-to-SMS service
MTS Mobility text.mtsmobility.com
NET10 Determine NET10’s carrier
Nex-Tech sms.nextechwireless.com
nTelos pcs.ntelos.com
Will change to Sprint early 2016
O2 (M-mail) mmail.co.uk
O2 Powered Networks  
O2 UK o2imail.co.uk
Optus optusmobile.com.au
Appears they charge for the service
Orange orange.net
PC Telecom mobiletxt.ca
PTel Mobile tmomail.net
Pioneer Cellular zsend.com
Pocket Wireless sms.pocket.com
Republic Wireless text.republicwireless.com
Rogers Wireless pcs.rogers.com
SaskTel sms.sasktel.com
Sprint messaging.sprintpcs.com
Straight Talk Determine Straight Talk’s carrier
Syringa Wireless rinasms.com
T-Mobile tmomail.net
T-Mobile UK t-mobile.uk.net
Telstra onlinesms.telstra.com
Telus Mobility msg.telus.com
Three three.co.uk
Tracfone Determine Tracfone’s carrier
US Cellular email.uscc.net
Unicel utext.com
Verizon vtext.com
Viaero viaerosms.com
Virgin Mobile vmobl.com
Virgin Mobile Canada vmobile.ca
Virgin Mobile UK vxtras.com
Vodafone No email-to-SMS service
Wind Mobile txt.windmobile.ca

Check out my article regarding test servers so you can test this out properly!

 

Servers
Quick Test Server

 

MPlayer Keyboard Controls and Shortcuts

MPlayer Keyboard Controls and Shortcuts

mplayer logo
mplayer logo

I love MPlayer but I don’t always recall its controls since its default GUI is bare bones and uses the keyboard to do most if not all of its actions. So, I’ve shamelessly referenced another site and am backing it up onto my site. Besides, one never knows how long a site might remain up and this info is too useful to have to recompile if lost.

To add to all of that, I’ve been thinking about doing a project where I edit the MPlayer source code to add a helpful popup that shows the control options in a pagnated way. I want this page to be a reference for it should I get the willpower to actually try and do this. Anyway, here are 74 MPlayer keyboard controls.

MPlayer Keyboard Shortcuts

Keyboard control
<- and -> Seek backward/forward 10 seconds.
up and down Seek forward/backward 1 minute.
pgup and pgdown Seek forward/backward 10 minutes.
[ and ] Decrease/increase current playback speed by 10%.
{ and } Halve/double current playback speed.
backspace Reset playback speed to normal.
< and > Go backward/forward in the playlist.
ENTER Go forward in the playlist, even over the end.
HOME and END next/previous playtree entry in the parent list
INS and DEL (ASX playlist only) next/previous alternative source.
p / SPACE Pause (pressing again unpauses).
. Step forward. Pressing once will pause movie, every consecutive press will play one frame and then go into pause mode again (any other key unpauses).
q / ESC Stop playing and quit.
+ and – Adjust audio delay by +/- 0.1 seconds.
/ and * Decrease/increase volume.
9 and 0 Decrease/increase volume.
( and ) Adjust audio balance in favor of left/right channel.
m Mute sound.
_ (MPEG-TS and libavformat only) Cycle through the available video tracks.
# (DVD, MPEG, Matroska, AVI and libavformat only) Cycle through the available audio tracks.
TAB (MPEG-TS only) Cycle through the available programs.
f Toggle fullscreen (also see -fs).
T Toggle stay-on-top (also see -ontop).
w and e Decrease/increase pan-and-scan range.
o Toggle OSD states: none / seek / seek + timer / seek + timer + total time.
d Toggle frame dropping states: none / skip display / skip decoding (see -framedrop and -hardframedrop).
v Toggle subtitle visibility.
j Cycle through the available subtitles.
y and g Step forward/backward in the subtitle list.
F Toggle displaying forced subtitles .
a Toggle subtitle alignment: top / middle / bottom.
x and z Adjust subtitle delay by +/- 0.1 seconds.
r and t Move subtitles up/down.
i (-edlout mode only) Set start or end of an EDL skip and write it out to the given file.
s (-vf screenshot only) Take a screenshot.
S (-vf screenshot only) Start/stop taking screenshots.
I Show filename on the OSD.
! and @ Seek to the beginning of the previous/next chapter.
D (-vo xvmc, -vf yadif, -vf kerndeint only) Activate/deactivate deinterlacer.
Hardware accelerated video output
1 and 2 Adjust contrast.
3 and 4 Adjust brightness.
5 and 6 Adjust hue.
7 and 8 Adjust saturation.
SDL Video Output Driver
c Cycle through available fullscreen modes.
n Restore original mode.
Multimedia Keyboard
PAUSE Pause.
STOP Stop playing and quit.
PREVIOUS and NEXT Seek backward/forward 1 minute.
GUI Support (if compiled in)
ENTER Start playing.
ESC Stop playing.
l Load file.
t Load subtitle.
c Open skin browser.
p Open playlist.
r Open preferences.
If TV or DVB support compiled
h and k Select previous/next channel.
n Change norm.
u Change channel list.
Navigate menus (if DVNAV support)
keypad 8 Select button up.
keypad 2 Select button down.
keypad 4 Select button left.
keypad 6 Select button right.
keypad 5 Return to main menu.
keypad 7 Return to nearest menu (the order of preference is: chapter->title->root).
keypad ENTER Confirm choice.
Teletext support (if compiled)
X Switch teletext on/off.
Q and W Go to next/prev teletext page.
mouse control
button 3 and button 4 Seek backward/forward 1 minute.
button 5 and button 6 Decrease/increase volume.
joystick control
left and right Seek backward/forward 10 seconds.
up and down Seek forward/backward 1 minute.
button 1 Pause.
button 2 Toggle OSD states: none / seek / seek + timer / seek + timer + total time.
button 3 and button 4 Decrease/increase volume.

If you’d like to check out another reference sheet, have a look at my HTML, CSS, and JavaScript Cheat Sheet that’s linked below!

Web Technologies
HTML, CSS, and JavaScript Cheat Sheet

 

 

HTML, CSS, JavaScript Useful Cheat Sheet!

HTML, CSS, JavaScript Useful Cheat Sheet!


To Top


To Bottom

Web Technologies
Web Technologies

I love web technologies because they provide a quick return on interest (ROI) and for the beginner gives immediate feedback in terms of accomplishment and sense of progress. There are many frameworks that one can use for a web based project but knowing the base elements these frameworks are comprised from is still important. Here is a reference list/cheat sheet of some of the most common HTML tags, CSS, and JavaScript one will likely use. This is great for Web Devs, Web Admins, coders, programmers, and the like.

HTML Tags

Most HTML tags are setup as open and close tags. This means that most tags are a pare/set and denote where they start and end. The end tag has a forward slash (/) to indicate the tag is the end tag.

<tag>Stuff in tag...</tag>
(open tag)content(/end tag)

<!--Some tags end like this-->
<tag/>

<div>

Div tags are considered devision tags and are used to section data on a page. CSS will then be used to style the tag by setting its position, setting the background color, setting the text color, etc. Think of the div as a container and your scaffolding for the page. Div tags are block elements.

<p>

The P tag stands for paragraph tag and this is like a sub container for the div tag. It often holds text but can contain images, links, and other non-block tags. Browsers will automatically add some space (margin) before and after each <p> element. This behavior can be modified with CSS using the margin properties. P tags are block elements.

<span>

The span tag is pretty much like the div tag. The difference between the two is that div is a block element which puts it on a separate line. A span tag, however, is an inline element, meaning that it can be on a line with other elements.


<img>

The img tag stands for images. People like images and I like images.

<img src="https://www.itdominator.com/wp-content/uploads/2017/07/wp-cli.jpg" alt="If image doesn't render, this text will show instead." />

<a>

Anchor tags link to parts on the same page or to new pages entirely. They are essentially links.

<!--To an external page...-->
<a href="http://www.google.com" target="_blank">Google</a>

<!--This will jump to the content that is wrapped with another anchor tag on the same page.-->
<a href="#colors">Colors</a>

<a name="colors">
<p>Colors are cool. The primary colors are red, green, and blue.</p>
</a>

<table>

Table is a block element that denotes there will be sub elements of th, tr, td. There are others but these are the core parts. Th stands for table header and
is inset within a tr (table row). Tr is table row which makes a row for the table. Td is table data which is like a column and is inset in a table row too.

border-collapse: separate (default):

Firstname Lastname
Tom Gar
Lois Griffin

border-collapse: collapse:

Firstname Lastname
Peter Griffin
Lois Matt

form

A form is used to submit data to the server. There are many form objects one can use. Below is a table covering all HTML5 form objects and their code and examples.

Object Preview HTML 5 code
Label

<label>Texte</label>
Button

<input type=”button” name=”name” value=”Bouton”>
Image button


<input type=”image” src=”image/bimage.jpg”>
Text field

<input type=”text” name=”text” value=”empty”>
Password

<input type=”password” name=”monpass” value=”12345″>
Date

<input type=”date” name=”date” value=”<?php echo $today?>”>
Date and time

<input type=”datetime” name=”time” value=”<?php echo $now?>”>
Time <time>2013-06-27</time>
Number

<input type=”number” name=”num” value=”12345″>
Color

<input type=”color” name=”color” value=””>
Search input

<input type=”search” name=”” list=”datalist” value=””>
Data
Dix
<data value=”10″>Ten</data>
Check box

<input type=”checkbox” name=”checkbox1″ value=”checkbox”>
Radio group



<label>Choice 1
<input type=”radio” name=”radio1″ value=”radio1″>
</label>
<label>Choice 2
<input type=”radio” name=”radio1″ value=”radio2″>
</label>
Textarea

<textarea name=”textarea”>content</textarea>
Range


<input type=”range” min=”-100″ max=”100″
value=”0″ step=”2″ name=”power” list=”powers”>
<datalist id=”powers”>
<option value=”0″>
<option value=”-30″>
<option value=”30″>
<option value=”+50″>
</datalist>
Data list To be used with input
<datalist id=”identifier”>
<option value=”1″>
<option value=”2″>
<option value=”3″>
</datalist>
Select

<select name=”select”>
<option>Alpha</option>
<option>Beta</option>
<option>Delta</option>
</select>
Select list

<select name=”select2″ size=”3″>
<option>Alpha</option>
<option>Beta</option>
<option>Delta</option>
</select>
Menu

  • New
  • Open
  • Save
  • <menu type=”context”>
    <li>New</li>
    <li>Open</li>
    <li>Save</li>
    </menu>
    Toolbar

  • <menu type=”toolbar”>
    <li><button type=”button” onclick=”fnew()”>New</button></li>
    <li><button type=”button” onclick=”fopen()”>Open</button></li>
    <li><button type=”button” onclick=”fsave()”>Save</button></li>
    </menu>
    Combo box


    <input type=”text” list=”comboid”>
    <datalist id=”comboid”>
    <option value=”0″>
    <option value=”-30″>
    <option value=”30″>
    <option value=”+50″>
    </datalist>
    File upload

    <input type=”file” name=”file”>
    Image & caption

    Caption

    <figure>
    <img src=”image/image.gif”>
    <figcaption>Caption</figcaption>
    </figure>
    Fieldset
    Title

    …Content…

    <fieldset>
    <legend>Title </legend>

    <p>Content</p>
    </fieldset>

    Output

    <output onforminput=”value = 2 + 2″></output>
    Meter
    12 units
    <meter min=0 max=24 value=12>12 units</meter>
    Progress 0%
    <progress id=”prog” max=100>
    Summary

    Overview
    term
    definition

    <details>
    <summary>
    Presentation
    </summary>
    <dl>
    <dt>term</dt>
    <dd>definition</dd>

    </dl>
    </details>

    Submit button

    <input type=”submit” name=”submit” value=”Submit”>
    Clear/Reset button

    <input type=”reset” name=”clear” value=”Clear”>

    HTML Entities

    HTML entities are used in place of reserved characters in HTML. Characters that are not present on your keyboard can also be replaced by entities as well. The most common are listed in a table below.

    Result Description Entity Name Entity Number
    non-breaking space &nbsp; &#160;
    < less than &lt; &#60;
    > greater than &gt; &#62;
    & ampersand &amp; &#38;
    double quotation mark &quot; &#34;
    single quotation mark (apostrophe) &apos; &#39;
    ¢ cent &cent; &#162;
    £ pound &pound; &#163;
    ¥ yen &yen; &#165;
    euro &euro; &#8364;
    © copyright &copy; &#169;
    ® registered trademark &reg; &#174;

    HTML Notes

    Recommended Default HTML Markup Before Content Is Added

    <!DOCTYPE html> <!--Tells a browser its an html page-->
    <html lang="en">
    <head>
      <meta charset="utf-8">  <!--Encoding model-->
      <title>Title seen on its tab</title>
      <link rel="stylesheet" href="/css/master.css"> <!-- Attach CSS through a path -->
    
    
    
    
    </head>
    <body>
    
    <!-- content goes here... -->
    
    
    <script src="resources/scripts/script.js" charset="utf-8"></script>  <!-- Attach Javascript File through path -->
    </body>
    </html>
    

    Block Elements

    In general, HTML elements can be divided into two categories : block level and inline elements. HTML block level elements can appear in the body of an HTML page. It can contain another block level as well as inline elements. By default, block-level elements begin on new lines. Block level elements create larger structures (than inline elements).

    • p
    • h1, h2, h3, h4, h5, h6
    • ol, ul
    • pre
    • address
    • blockquote
    • dl
    • div
    • fieldset
    • form
    • hr
    • noscript
    • table

    Inline Elements

    HTML inline elements can appear in the body of an HTML page. They can contain data and other inline elements. By default, inline elements do not begin on new lines. Inline elements create shorter structures (than block elements).

    • b, big, i, small, tt
    • abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
    • a, bdo, br, img, map, object, q, script, span, sub, sup
    • button, input, label, select, textarea

    Margins

    Margins are the spacing around an element.

    This span tag has 2em margin set…

    Padding

    Padding is the spacing internal to an element and its “walls”.

    This span tag has 2em padding set…

    CSS

    Examples/Logic

    Selector Example Example description
    .class .intro Selects all elements with class=”intro”
    #id #firstname Selects the element with id=”firstname”
    * * Selects all elements
    element p Selects all <p> elements
    element,element div, p Selects all <div> elements and all <p> elements
    element element div p Selects all <p> elements inside <div> elements
    element>element div > p Selects all <p> elements where the parent is a <div> element
    element+element div + p Selects all <p> elements that are placed immediately after <div> elements
    element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
    [attribute] [target] Selects all elements with a target attribute
    [attribute=value] [target=_blank] Selects all elements with target=”_blank”
    [attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word “flower”
    [attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with “en”
    [attribute^=value] a[href^=”https”] Selects every <a> element whose href attribute value begins with “https”
    [attribute$=value] a[href$=”.pdf”] Selects every <a> element whose href attribute value ends with “.pdf”
    [attribute*=value] a[href*=”w3schools”] Selects every <a> element whose href attribute value contains the substring “w3schools”
    :active a:active Selects the active link
    ::after p::after Insert something after the content of each <p> element
    ::before p::before Insert something before the content of each <p> element
    :checked input:checked Selects every checked <input> element
    :disabled input:disabled Selects every disabled <input> element
    :empty p:empty Selects every <p> element that has no children (including text nodes)
    :enabled input:enabled Selects every enabled <input> element
    :first-child p:first-child Selects every <p> element that is the first child of its parent
    ::first-letter p::first-letter Selects the first letter of every <p> element
    ::first-line p::first-line Selects the first line of every <p> element
    ype.asp”>:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
    :focus input:focus Selects the input element which has focus
    :hover a:hover Selects links on mouse over
    sp”>:in-range input:in-range Selects input elements with a value within a specified range
    :invalid input:invalid Selects all input elements with an invalid value
    :lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to “it” (Italian)
    sp”>:last-child p:last-child Selects every <p> element that is the last child of its parent
    ype.asp”>:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
    :link a:link Selects all unvisited links
    :not(selector) :not(p) Selects every element that is not a <p> element
    sp”>:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
    hild.asp”>:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
    f-type.asp”>:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
    ype.asp”>:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
    ype.asp”>:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
    sp”>:only-child p:only-child Selects every <p> element that is the only child of its parent
    :optional input:optional Selects input elements with no “required” attribute
    ange.asp”>:out-of-range input:out-of-range Selects input elements with a value outside a specified range
    sp”>:read-only input:read-only Selects input elements with the “readonly” attribute specified
    sp”>:read-write input:read-write Selects input elements with the “readonly” attribute NOT specified
    :required input:required Selects input elements with the “required” attribute specified
    :root :root Selects the document’s root element
    ::selection ::selection Selects the portion of an element that is selected by a user
    :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
    :valid input:valid Selects all input elements with a valid value
    :visited a:visited Selects all visited links

    IDs

    ID selectors are supposed to be unique within the HTML document. When queried with JavaScript it should return a single element but it can return an array/list if the web developer set the document with multiple IDs of the same type. Standards dictate this is poor form if done.

    <!-- The IDs are arbitrary. -->
    
    <div id="left-container"> <!-- Content --> </>
    <div id="middle-container"> <!-- Content --> </>
    <div id="right-container"> <!-- Content --> </>
    

    Classes

    Class selectors don’t have to be unique within the HTML document. When queried with JavaScript it usually returns an array/list.

    <!-- The Class is arbitrary. -->
    
    <div class="book"> <!-- Content --> </>
    <div class="book"> <!-- Content --> </>
    <div class="book"> <!-- Content --> </>
    

    CSS Button Generator Button Generator

    Quickly make buttons…

    Button













    JavaScript

    Get Elements By ID/Class/TagName/CSS Selector

    Getting elements by id, class, and tag among other options is a sizeable chunk of the JavaScripting one will do. This allows us to interact with the DOM

    // Get HTML element(s) with specified id.
      var x = document.getElementById('id');
    
    // Get HTML elements with specified class.
      var x = document.getElementsByClassName('className');
    
    // Get HTML elements with specified tag.
      var x = document.getElementsByTagName('tagName');
    
    // Get HTML elements tht matches a specified CSS selector
    // This example returns a list of all  elements with class="icon".
      var x = document.querySelectorAll("img.icon"); 
    

    Function

    The basic block of coding we all know and have come to love. Yes…the function.

    function sum(a, b) {
        return a + b;      // The function returns the sum of a and b
    }
    var sumVal = sum(2,4);
    alert(sumVal);  // Will pop-up saying 6
    

    If Statement

    Check the conditions.

    if (condition) {
    }
    

    Loops

    Loops baby, they’re needed and these will meet your needs.

    // Standard loop
    for (var i=0; i<array.length; i++) {
       array[i].innerHTML;
    }
    
    // For In Loop
    for (var tag in elements) {
        // Do stuff while there are tags to work on
    }
    
    // While Loop
    while (condition) {
        // Do stuff while condition is met
    }
    
    // Do While
     do {
        // One at least one and keep doing stuff while condition is met
    }
    while (condition);
    

    Switch/Case Statement

    Good for menu stuff, switch/case statements are ready for the job.

    var day;
    switch (new Date().getDay()) {
        case 0:
            day = "Sunday";
            break;
        case 1:
            day = "Monday";
            break;
        case 2:
            day = "Tuesday";
            break;
        case 3:
            day = "Wednesday";
            break;
        case 4:
            day = "Thursday";
            break;
        case 5:
            day = "Friday";
            break;
        case  6:
            day = "Saturday";
    }
    alert(day);
    

    Alert & Console Log

    Error logging is helpful. The two way to do this are through alerts and console logging. Most of the time, alert isn’t used but it can be helpful to warn the user, etc.

    // This will generate a pop-up window with the "Hello, World!" text.
    alert("Hello, World!");
    
    // This will log to the console the "Hello, World!" text.
    To access the console in Firefox, do Ctrl+Shift+J
    console.log("Hello, World!");
    

    Adding Event Listeners

    Event listeners are the next most important after getting an element. They allow us to let the user click on stuff or interact through other ways in order to create dynamic interactions.

    // This attaches a click event to the entire DOM.
    // We can then check which IDs, Classes, etc were clicked to then do other things.
    
    document.addEventListener("click", (e) => {
        if(e.target.id == "alert2")
            alert("You clicked an element with the ID of alert2");
    
    });
    
    
    // This attaches to a specific element with the ID of cars and
    // when clicked alerts us to the innerHTML text.
    
    <p id="cars">Hello, World!</p>
    
    document.getElementById('cars').addEventListener("click", (e) => {
            alert("The content is:  " + e.target.innerHTML);
    });
    
    // This attaches it in a different manner.
    document.getElementById('cars').onclick =  function(){
        // do stuff
    }
    
    // You can add it though a tag as well.
    <div onclick="myFunction()"> I am clickable! </div>
    

    Here is a list of some common HTML event attributes:

    Event Description
    onchange An HTML element has been changed
    onclick The user clicks an HTML element
    onmouseover The user moves the mouse over an HTML element
    onmouseout The user moves the mouse away from an HTML element
    onkeydown The user pushes a keyboard key
    onkeyup The user releases a keyboard key
    onload The browser has finished loading the page

    Arrays

    Arrays in JavaScript are a special object and really act like lists or vectors since we can push new values to it.

    // An empty array
    var cars = [];
    
    // Has nodes/objects
    var cars = ["Toyota", "Sab", "Mazda"];
    
    // Add to array
    cars.push("Nesan');
    
    // Remove from end of array
    cars.pop();
    

    Parent Element

    Sometimes, we need to access the element that contains the element we accessed. This could be because we want to remove the element or we want to add something next to it than in it.

    <div>
        <p id="cars" >
            Cars are cool.
        </p>
    But boats are even more cool.
    </div>
    
    var x = document.getElementById('cars').parentElement;
    alert(x.innerHTML);  // This will present an alert box with "But boats are even more cool."
    
    
    // This will remove the element we accessed from the div
    var childElm = document.getElementById('cars');
    var parentElm = childElm.parentElement;
    
    parentElm.removeChild(childElm);
    

    Cookies

    Sometimes, we need to store user information for later usage. This is where cookies come in.

    function saveAsCookie() {
        var uName = document.getElementsByName("userName")[0].value;
        var eml = document.getElementsByName("email")[0].value;
    
    
        // should set expires date: Ex -> expires=(UTC date).
        // Use secure; in argument to make sure it only transports across HTTPS or secure connections
        document.cookie = "username=" + uName  +"; path=" + document.URL;
        document.cookie = "email=" + eml + "; path=" + document.URL;
    }
    
    function displayCookies() {
        var cookiesField = document.getElementById("cookieField");
        var cookies = document.cookie.split(";");  // Set as an array to traverse....
    
        for (var i=0; i<cookies.length; i++) {
            cookiesField.innerHTML += cookies[i] + "<br/>";
        }
    }
    
    function clerCookies() {
        var expireDate = "Thu, 01 Jan 1970 00:00:00 UTC";
        document.cookie = "username=; expires=" + expireDate;
        document.cookie = "email=; expires= " + expireDate;
    }
    
    <form>
    <input type="text" title="User Name" name="userName" placeholder="User Name" value=""/>
    <input type="text" title="Email" name="email" placeholder="Email" value=""/>
    <input type="button" name="submit"  onclick="saveAsCookie()" value="loginSubmit">
    </form>
    
    <button type="button" name="button" onclick="displayCookies()">Get Cookie</button>
    <button type="button" name="button" onclick="clerCookies()">Clear Cookie</button>
    
    <div id="cookieField"></div>
    

    AJAX

    AJAX is a developer’s dream, because you can:

    • Update a web page without reloading the page
    • Request data from a server – after the page has loaded
    • Receive data from a server – after the page has loaded
    • Send data to a server – in the background
    function loadDoc() {
      var xhttp = new XMLHttpRequest();        // Create the xhttp object
      xhttp.onreadystatechange = function() {  // This is actually run after open and send are done
        if (this.readyState == 4 && this.status == 200) {  // Confirm we have a  successful connection
         // Receive the response info. For PHP it is echo that sends it. Then set into demo div
         document.getElementById("demo").innerHTML = this.responseText;  
        }
      };
      xhttp.open("GET", "ajax_info.txt", true);  // post or get, path to XML page or php script, set async 
      xhttp.send();                              // Start the process
    }
    
    
    <button type="button" name="button" onclick="loadDoc()">Load XML</button>
    <div id="demo">
    

    String Manipulation

    String Manipulation can be important when handling cookies or data. Sometimes we need to split it into an array, make it lower case or vise versa, find a sub string, or more.
    These should get you started:

    // Find sub string
    var str = "Hello world, welcome to the universe.";
    var n = str.includes("world");
    
    // Find sub string at offset
    var str = "Hello world, welcome to the universe.";
    var n = str.includes("world", 12);
    
    // Replace string 
    var str = "Windows!";
    var res = str.replace("Windows", "Linux");  // old value, new value
    
    // Replace all case sensitive
    var str = "Mr Blue has a blue house and a blue car";
    var res = str.replace(/blue/g, "red");
    
    // Replace all case-insensitive
    var str = "Mr Blue has a blue house and a blue car";
    var res = str.replace(/blue/gi, "red");
    
    // String split
    var str = "How are you doing today?";
    var arry = str.split(" ");  // Split by spaces
    
    // To Upper
    var x = "Linux";
    x.toUpperCase();
    
    // To Lower
    var x = "LINUX";
    x.toLowerCase();
    

    Conclusion

    I think this list is pretty good and fits most user’s needs. This should definitely help those who are looking for a certain tag or CSS logic or are just wanting to see a broad selection of what web technologies are based off of. Coders, website developers, Admins, etc should have most of what they need right on the page with good samples to start. Leave a commemt if you’d like me to add something else! Anyway, if you liked this reference sheet/cheat sheet, start using what you have learned by setting up a quick test server! Read my article by clicking the below image!


    Servers