User Tools

Site Tools


blog:spring2016:hheath:journal

This is an old revision of the document!


Web Application Development Journal

MONTH Day, YEAR

This is a sample format for a dated entry. Please substitute the actual date for “Month Day, Year”, and duplicate the level 4 heading to make additional entries.

As an aid, feel free to use the following questions to help you generate content for your entries:

  • What action or concept of significance, as related to the course, did you experience on this date?
  • Why was this significant?
  • What concepts are you dealing with that may not make perfect sense?
  • What challenges are you facing with respect to the course?

JANUARY 25, 2016

Week 2

This week we continued to become familiar with the use of the UNIX commands and how to access and edit text files containing html and php content. We also dabbled with outputting php to a webstream written within the html markup.

Useful Basic Unix Commands for PHP course

ls – lists files
pwd – print working directory, gives absolute path
mkdir php – makes a dir called php
cd public_html – changes dir to public_html
cp – copy files
mv – moves files
rm – removes files
man ls – shows online manual for ls

Good Stuff To Know

Pod colors:

  • white – txt files
  • red – old
  • green – can run exec

Text Editor: nano

To open a file and edit: nano test.html

PHP:

Text files containing php have to be saved with the .php extension
Echo outputs to webstream
\ escapes quotes
; necessary statement ender 

Mysteries of the Unknown

Bacon salt is a thing!

JANUARY 30, 2016

Week 3

This week we learned how to access Firefox from the terminal with a super easy command, firefox &. We also started loops, more specifically loops within html tables. The if statement is a condition that resolves to true or false. The numeric for, while and do while loops are condition-based, but the list-based for loop is not. It still has stuff to go through.

Useful Nano Commands

ctrl K – cuts current line and stores in buffer
ctrl U – uncut from cutbuffer into current line
ctrl C – displays position of cursor
ctrl A – moves to beginning of current line
ctrl E – move to end of current line

Project: Checkerboard Madness

Produce a checkerboard table using a combination of PHP, HTML and CSS.

Attempt 1:

Generated a 10px border around a 480px high and wide table. The two for loops added 8 red rows and 8 black rows running side-by-side and half the length of the table. Not exactly sure why that happened but at least there was output.

Multiple Attempts:

Generated a 10px border around a 480px high and wide table with a black square in the bottom right hand corner. I used two for loops to output the table row and table columns. I then added an if, else statement to add the red and black backgrounds. It was supposed to print a checkerboard but only printed a single black square in the bottom right hand corner of the table.

Another Attempt:

Did some research and found that you need to add the rows and columns before you use an if statement to output them in checkerboard fashion.

for ($i = 1; $i <= 8; $i ++)
 for ($j = 1; $j<=8; $j ++)
$rowcol=$i + $j;

FEBRUARY 8, 2016

Week 4

This week we ventured into the world of arrays and functions. An array is a container. It stores multiple values in one variable. The values are accessed using an index number. In PHP, arrays have value to key associations.

Arrays

There are three different types of arrays…

Multidimensional →contains one or more arrays

Indexed →has a numeric index

Syntax:

$item [0] = “mango”;
$item [1] = “banana”;
$item [2] = “apple”;

Associative →has named keys

Syntax:

<?php
$array(
key  => value,
key  => value2,
key  => value3,
… 
);  
?>

The key can be an integer or a string and one array can contain both at the same time. The value can be of any type.

Always use quotes around a string array index. e.g. $item[‘papaya’] Do not put quotes around keys that are constants or variables.

Functions

Syntax:

Function functionName( optional: parameters/arguments ) {
 code to be executed;
}

Function names can start with letters or an underscore but NOT a number. Information is passed to the function through comma-separated arguments.

Project: Draw a picture

Draw a picture using PHP. See php.net’s image processing and GD documentation for help.

Using the example code done in class (function.php) I attempted to create an abstract image using rectangles and ellipses. The xy coordinates were a little baffling at first but once I confronted the documentation things seemed to make some sense. I was able to create several rectangles of varying widths and lengths and even executed a transparent ellipse using imageallocatealpha over the center of the design.

Pro tip:

  • x1 is the upper left x coordinate
  • 1 is the upper left y coordinate
  • 0,0 is the top left corner of the image
  • x2 is the bottom right x coordinate
  • y2 is the bottom right y coordinate

Next attempt might be an homage to the square.

FEBRUARY 22, 2016

Week 6

This week’s entry, which includes the week before break (Feb 8 – 12) we explored the vexing world of graphs. The first attempt started before break and was hampered possibly by pre-breakitis, or maybe it had something to do with arrays or lack thereof either-way it didn’t have the finesse that this weeks graph code showed.

Graph1 Breakdown

The graph starts out with a call to the header(), which outputs an image in the form of a png file.

header("Content-type: image/png");

The variable $img stores the container parameters for the graph using php’s imagecreatetruecolor. The container is 800 x 100.

$img = imagecreatetruecolor(800, 100); 

Next, we mixed some colors in our virtual palette using imagecolorallocate, which allocates a color for an image. It must be called in order to create each color used in the image represented by $img. The first call to imagecolorallocate() fills the background color in images created by imagecreate().

Because we can…we shall Foof. It. Up.

$fuschia = imagecolorallocate($img, 0xff, 0x00, 0xff);

The imageline() function does exactly what you think, it draws a line between two given points. Here we established our x-axis and y-axis lines in white on the graph.

imageline($img,   0,  0,  99,  $white);  // y-axis line

The fopen() function in php binds a named resource, specified by a filename, to a stream.

$fh = fopen("/home/username/public_html/php/data.txt", "r");

Here we are opening a stream to our data.txt file that contains a list of numbers used as plot points on our graph. The “r” is a mode parameter that specifies the type of access set to the stream. The “r” tells fopen to open the file with read only access.

Now we tackle the for loop(s).

First, we assign a starting point for each axis.

$x = 10;
$y = 97;

Next we use fscanf() to parse input from the $fh (data.txt) file and interprets the input according to the specified format. A type specifier determines how the argument data is treated. The %d means that the argument is treated as an integer, and presented as a decimal number.

fsanf($fh, "%d", $pt);
imageline($img, $x, $y, $x + 98, 100 - $pt, $blue);
$x = $x + 98;
$y = 100 - $pt;

This loop was created for each of the four plotted lines on the graph.

Graph2 Breakdown

The second attempt at the vexing world of graphs yielded a cleaner, more efficient piece of code. Arrays were not fought but embraced and implemented within a nested for loop.

A color array was created ($color = array();) and added to our virtual palette.

$color[0] = $blue = imagecolorallocate($img, 0x00, 0x00, 0xff);

The first loop looped through the data series or the four rows and eight columns of numbers in our datafile.txt file.

for($i = 0; $i < 4; $i++)
{
   $dataline = fscan($fh, "%d %d %d %d %d %d %d %d");
}

The nested for loop plots the lines on the graph using imageline and calls our color array() to plot four lines on our graph.

for($x =0; $x < 8; $x++)  // loops each line
{
imageline($img, $px, $y, 100 * $x + 10, 99 -$dataline[$x], $color[$i]);
$px = 100 * $x + 10;
$y = 99 - $dataline[$x];
}

Pro tip – Don’t forget to close your file. fclose($fh);

UNIX/Linux Fundamentals Journal

MONTH Day, YEAR

This is a sample format for a dated entry. Please substitute the actual date for “Month Day, Year”, and duplicate the level 4 heading to make additional entries.

As an aid, feel free to use the following questions to help you generate content for your entries:

  • What action or concept of significance, as related to the course, did you experience on this date?
  • Why was this significant?
  • What concepts are you dealing with that may not make perfect sense?
  • What challenges are you facing with respect to the course?

JANUARY 25, 2016

This week we were introduced to the pod and given directions on how to open a terminal session and ssh into Lab46. To become familiar with editing our Opus project UXIO had us customize our title and subtitle in addition to adding a brief introductory statement. We also subscribed to the class mailing list and sent a brief introductory message to the class. This task familiarized us with maneuvering within the mail program Alpine. Using the IRC or class chat is still somewhat unclear but the setup went smoothly.

Useful Commands

  • Screen -r –re-attaches a screen session in IRC chat
  • Press and hold CTRL while hitting the “a” key. Release both and hit the “d” key –detaches screen session in IRC and returns to terminal session.

Reminders

Don't forget to read the MOTD!
Check your Lab46 email frequently!

FEBRUARY 1, 2016

Week 3

This weeks project (arc0) relates to archive handling. Archives are containers that encapsulate things or files. Compression is an action performed on a single file.

Useful Commands

The tar (GNU version) command stores and extracts files from a tape or disk archive. It also combines multiple files into a singe file.

xz is a data compression tool. It compresses or decompresses a file.

gzip compresses or expands files.

zip packages and compresses (archive) files.

tac concatenates and prints files in reverse.

rev reverses lines characterwise

Project Notes

To decompress the .tar.xz file use the tar xf filename command in the directory you want to extract the files to. Use the tac (cat backwards) and rev commands to help unscramble the files.

Mysteries of the Unknown

Mars’ two moons are Phobos and Deimos and are named after Greek mythological characters. The Latin translation of each is fear and panic respectively.

FEBRUARY 8, 2016

Week 4

This week we learned about pipes, filters and the file system. Actually we learned about multiple pipes but the one most pertinent to us is the | command. Pipes are extremely useful and powerful. They allow the connection of two or more commands, which allows for the output (stdout) of one element to be the input (stdin) of the next. Each pipe tells the system to connect the standard output of the left element to the standard input of the right program. Pipes are unidirectional, meaning that data flows through the pipe from left to right.

Command Expansions: back ticks/back quotes

  • ' full quote –literal
  • “ half quote –allows for expansion, a grouping
  • ` back quote –enables command expansion

The File System:

Dir –points to many files. Home dir mounted from the file server.

  1. / or root has grand cosmic powers. Equivalent to admin in Windows
  2. home
  3. username

. shows current location; doesn’t change
.. parent goes up in dir; takes you to home

Project Notes

This week’s project is the legendary puzzle box (pbx0)! As soon as I solve it, I will update this section with my notes.

FEBRUARY 22, 2016

Week 6

Fun with Vi! Enlightenment has finally come albeit with a learning curve. Let’s begin our journey into the key elements of this “cursor less” world.

To enter this world type ‘vi filename’. The screen before you is command mode where letter keys are individual commands. The second mode is insert where most of your text input happens. To enter insert from command hit the lowercase “i” key, to exit insert and enter command hit the “esc” key.

Commands follow a general pattern: [cmd] [number] textobject. Lowercase commands define a word as a contiguous sequence of digits, and underscores. Uppercase commands define a word as a contiguous sequence of non-whitespace characters. Commands can be prefixed with a number, e.g. 24h goes left 24 characters.

There are many commands in Vi that edit, navigate, and manipulate the text file. We will explore them next time.

Pro tip: Do not use cursor keys in classic Vi.

Project Notes

This week’s project is the follow up to the legendary puzzlebox (pbx0) appropriately titled puzzlebox next (pbx1). I am currently hacking my way through this labyrinth. The first challenge was opening the zipped pbx1 file, which was easily accomplished with the unzip tool. This inflated a README file and prompted for a password to an enigmatic.file file. Not having a password to open said file I sheepishly hit the enter key, which skipped the enigmatic file due to incorrect password and inflated an octal2ascii.c file. Deciding it was best to actually read the README I opened it with a text editor after establishing it was an ASCII text file.

blog/spring2016/hheath/journal.1456202473.txt.gz · Last modified: 2016/02/23 04:41 by hheath