Databases on WebhostingBuzz

So after I completed a few of those tutorials to load MySQL and PHP on my computer, I learned that they are already included as part of my cPanel in WebhostingBuzz.

I also learned that there are not yet any capabilities to store images in a database, so in the database, you just store the link to the image, where it is stored on your server. Here is a good website for details about having images in a database.

Connect File:

• Don't put it into a public folder, or other people can hack into it.
• "../" means go up a folder, so you can save it as "../connect.php"
  
• Elements: name (i.e. "test"), Location (i.e. "localhost" or "127.0.0.1"), Password (i.e. "password")
• "$" means variable
• Require vs. require_once - difference is how many times they try to connect to DB
  

Step 6: CSS

These past few weeks I've been working on the CSS for my website. I learned a lot about it (see previous web posts on CSS). See the updated version of my site here.

More CSS

Block-level "div" element

• for applying style to a block of content
• separates out the parts of the document.
• people today say not to use div tags because they are becoming more specific, but a lot aren't used yet, so you have to choose what you want.

In-line element "span"

• Used to apply a style to an in-line part of the document (like within the text of the document)
• cool

Parts of a style:

• Selector: which elements in HTML the style will apply to
• property: identifies what property of the element(s) that the style is applied to will be affected.
• value: sets the property to a particular value.

div#content{
color: white;
}

Comments and White space

• To start a comment in a CSS file: /*
• To end a comment in a CSS file: */
• You can put a comment anywhere in the document and it will be parsed out of the functioning CSS text
• Whitespace is typically ignored in CSS, but you can add it for organization.

Statements

• "{" indicates the CSS block. Every style has a selector and a block.
• A block has many statements. Each statement is terminated by a semi-colon. ";" If you forget the semicolon, the other statements will not be understood by CSS parser, unless it's at the end of a block.

Tag, Class, and ID selectors

• Use class selectors if you think you'll use the style again.
• Use and ID selector if the style is specific to a particular element.
  

Psuedo-selectors

• i.e., visited state, unvisited states
• tag selector, link state = a:link
• tag selector, visited state = a:visited
• tag selector, hover state = a:hover
• to get rid of underline= a { text-decoration: none; }
• You can also underline it when you hover over it
• You can also do specific things for the first line of a paragraph

Managing font attributes

• font-weight
• font-family
• font-style

Positioning Content

• Relative positioning is for creating a reference point for absolute positioning.
• z index property: the third dimension--letting things go behind or in front.
• z-index: -1; (0 is the lowest number, so whatever is level 0 gets put in front)
  

Critique #1: Promises of the Book of Mormon

For this first critique, I am looking at Jacob Burdis's project, Promises of the Book of Mormon. Here are some of my thoughts:

• Technology - I am glad he's exploring Corona, because I think I gave him that idea. I don't know enough about the lua language to critique it's organization, but I think it's great that it's a cross-platform building tool, and that he's experimenting with mobile development. Good choice.
  
• Design - I feel that the design is simple and user-friendly, not too busy or too fancy. I think it is a pretty simple list of all the ways you could search for the promises - Conditions, blessings, or saved. Perhaps in the future you could also search by specific book within the Book of Mormon. On the page that lists the references, (step 7, "Abrahamic Covenant"), it looks like the play buttons will go to a video or an audio file. I wonder if there's a better way to display that. I think the navigation is mostly intuitive though.
  
• Teaching Methods - In my opinion, this project is more of an index for further study rather than an instructional piece... if that makes sense. But those indexes are becoming more and more important in the field of education as the supply of resources is increasing, so I feel that this is also a timely tool.
  

Formatting

The Box Model

• Interpreting the size of the object
• content < padding < boarder < margin

Centering on the page

• Viewport = browser, what you view.

Block vs. in-line elements

• Different types of elements
  
• Block fills up the space to the right, has a new line before and after.
• Block examples: h2, p, div
  
• In-line examples: links, section
  
• "Child" elements - everything is always in context of its parents
  
• margin: 0px auto; --> makes the distance from the edge of the viewer on the sides to the start of the content the same no matter how small or large your window
• absolute positioning: absolute within container
• relative positioning: things within it move position to it.
  

In-line only takes up as much space as it takes to fill the content.

Step 5: Installing Apache, MySQL, and PHP

This week I went through the lessons on both Lynda.com and the HardCore Club, and I found that they were very different. This made me realize that there are different ways to do the same things for this installation process. With Lynda, I installed PHP, MySQL, and phpMyAdmin. I also learned about options for downloading WAMP, a server with Apache, PHP, and MySQL.

Relational Database

Elements of an Excel spreadsheet:

• Worksheets - big table
• Workbooks
• Columns
• Rows
• Cells

MySQL Databases:

• Tables (like Excel worksheet)
• Databse (like Excel workbook)
• Entries (rows)
• Fields (columns)

Relationships exist in our designs and in our minds, but that's all. Your design for your database is like the foundation of your building. You definitely want that to be right before you start.

With a relational database, we lose flexibility, but we gain efficiency. You can't just add new fields to a relational database.

Convention: Rules that help for consistency within a database. (i.e. Capitalization/camelcase)

Create new tables for unkown info.

• GradebookTable
• Assignments
• StudentInfo
• Grades

Unique ID, Foreign Key, boolean

Design Blueprints

The purpose of the project:

• Create a visual representation of the Instructional Design projects I've worked on during my graduate experience at BYU.

The approach I'll take:

• Online portfolio, displayed as an art.

Flow

• People will come to the site and click on a category of projects. Some categories are for the intended audience, some are for the organization I made them with, and some are just "Fun." When they click on the category, they will see a list of applicable projects and their thumbnails. When they click on the thumbnail, they will see the design processes used, considerations for each project, and technologies used for each project.

Design Presentations

Keith Proctor

• Using different aspects of a message
• Purpose/problem, main idea, validation/Supporting evidence, values/assumptions
• Graphically helps connect different ideas
• Date stamp and tag references
• Note view: click on links to see the notes - graphically represent the notes you're taking
• XML helps do the search filter
• Generative instruction
• Tag cloud
  
  

Scott Ashton

• CSS, HTML5, a picture-viewer to use if you were a photographer
• Needs a little more direction

QR Codes


Jacob Burdis

• Promises of the Book of Mormon
• Cool draft in Corona
  

Step 3

I worked on the HTML for my home page. The most challenging part was making a horizontal list because I had not yet done any CSS tutorials. But I finally got a horizontal list.

There are still many things I need to do with it, but I think my future CSS tutorials will really help me with that.

New code can be found here: janachapman.com/ipt560

Step 4: Apache Server

From the Hard Core Club, I learned that you can change the port (Kevin had some really good graphics for ports). I also learned that files saved in Program Files will often be only accessible to the administrator of the computer being used, and I learned how to change the settings to allow me to access them. (It's all the little stuff that will kill you when making a website. php? HTML5? Easy.) It was also neat to change the default file served on the server.

More Loops

Types of Loops

• While
• Do
• For (iterator, start/end point)

Types of Arrays

• Indexed
• Random
• Associative (don't exist in JavaScript, but they they work fine in JQuery). An associative array is NOT indexed; it doesn't look at a number, it looks at the key.

example: $phoneBook = array("Davies" => 5229, "Gibbons" =>3674);

Iterator decides where to start (1, 0, etc.)

Jana Chapman, Number 5

I'm the fifth child in my family. If there was a table with all the children in my family, I would be number 5.

When you get to the end of a playlist, it usually loops.

JavaScript:
for (i=1; i++; i<=10){
document.write(i)
}

php:
for ($i=0; i<101;i++){
print(i)
}

lua:
for i=0, 100 do
print(i)
end

You can use arrays and lists to get through numbered lists/variables.

Arrays

• A box of 12 crayons - "Get the first one from the right."
• An order of family members.
• "Hash" = an associative array

JavaScript: (starts with 0)
for (i=1; i++; i<=10){
document.write(i)
}

var myFamily={"John", "Kimball", "Karen", "Kathryn", "Jana", "Sara", "Kristen"}
alert{myFamily[5]};

Modularizing in your code helps you iterate through your arrays.