1

Web Design Workshop

DIG 4104c

Spring 2014Dr. J. Michael Moshell

University of Central Florida

Lecture 2:

The git source control systemwww.redbugbblle.com

-2 -

About git

If you had this workshop once already, then

you had an introduction to git. Bear with us.

If you DIDN'T, then you may have experienced the concept

but not the working system. So you gotta learn how to use

it now. We're serious.

en.wikipedia.org

-3 -

Step 0: Set up MAMP or WAMP

(Local Apache development environment)

If you don't know how,

a) ask your team mates or

b) ask your lab instructor.

GITtin' it on with git:

-4 -

Step 1: Install GIT, from git-scm.com

Do this before your lab, if possible.

If you don't have a laptop, we will TRY to use the lab's

computers ... and your home desktop machine.

But it's much more tedious.

-5 -

Step 2: Become a habitual user of GIT

WHY? Because a significant number of web design AND

game design firms are now using this Version Control System

Several competing logos are in circulation .

and who's that brown dude eating trees?

-6 -

Step 3: ( Look-Ahead) Learn how to use smartGit, a GUI client

(next week)

WHY? It has a better graphical display than ‘bare git’.

But we want you to understand the command line interface

first.

Step 4: (Look-Ahead) Learn how to use bitbucket,

an online shared git repository. (3 weeks away)

-7 -

Where to get started? This is the best tutorial/explanation

That I’ve found – and it’s free!

http://progit.org/book/

A repository is (similar to) a database that remembers

all the previous versions of all the files in a project.

-8 -

Where to get started? This is the best tutorial/explanation

That I’ve found – and it’s free!

http://progit.org/book/

A repository is (similar to) a database that remembers

all the previous versions of all the files in a project.

It can 'remind' you of the changes you made.

It can show you the lines of code that were changed.

-9 -

Where to get started? This is the best tutorial/explanation

That I’ve found – and it’s free!

http://progit.org/book/

A repository is (similar to) a database that remembers

all the previous versions of all the files in a project.

It can 'remind' you of the changes you made.

It can show you the lines of code that were changed.

Most importantly, it can organize a team's work so that

you don't destroy each others' work.

-10 -

The Team model, with a central repository (old way of doing it)

-11 -

The Distributed model, with local repositories

-12 -

Our "beginner model", for Project 1

this part

not used

for Project

One

-13 -

The local-and-remote repository model

Advantages of this model:

You can work locally

even if the network is

unavailable.

It's very fast

You can 're-sync' later.

-14 -

The mysterious HASH code (SHA-1)

Every document has a 40 character "signature" computed

from all of its characters. It is called a SHA-1 and looks like

24b9da6552252987aa493b52f8696cd6d3b00373

These are used as 'handles' for all documents (not file names)

So every new version of a file has a new SHA-1.

AND

Any corruption of a file can be detected by recomputing SHA-1.

-15 -

Three states of a code file:

committed: (working copy == repository copy)

modified: (working copy != repository copy)

staged: ready for recommitment, after you tell us WHY

(the 'index' keeps track of what's staged)

-16 -

The basic workflow

1. Modify files in your working directory

2. "Stage" the files, adding snapshots to the 'index'

(staging area)

3. "Commit" the files, adding explanation and

saving to repository

Here’s how you will get set up, and DO IT, in the lab.

-17 -

Using the Command Line Interface

(“Console”)

On Mac:

-18 -

Using the Command Line Interface

(“Console”)On PC:You access the Run command by holding down the

Windows logo key and pressing R.

-19 -

OR you can use the ‘unix-like shell’called Gitbash

-20 -

Install Git

Don't follow the 'from source' description in the text.

Follow the instructions from your download site, at

git-scm.com

Lab Instructor will help if needed

Customize your git:

>git config --global user.name "John Doe" (use your name)

>git config --global user.email johndoe@example.com

-21 -

Initialize your Repository

1. Copy my 3 example files from the course website

into a directory titled 'project0', in your docroot

(htdocs for MAMP, www for WAMP)

2. Also create a super simple HTML “hello world” file,

And call it hello.html.

3. Using your console window, change directory (cd) to

your project0 folder. (green=computer’s output)

>cd /Applications/MAMP/htdocs/DIG4104c/project0

-22 -

Looking Around

>ls (or, if you’re using windows, >dir)

earth.gif example.dragdrop.html hello.html

-23 -

>ls –la (I don’t know HOW to do this on PC Console.

Use gitBash.)

total 632

drwxr-xr-x 9 jmichaelmoshell admin 170 Jan 6 03:28 .

drwxr-xr-x 14 jmichaelmoshell admin 136 Jan 6 03:28 ..

drwxr-xr-x 4 jmichaelmoshell admin 313470 Dec 29 15:16 earth.gif

drwxr-xr-x 4 jmichaelmoshell admin 1300 Jan 5 126:51 example.dragdrop.html

-rw-r--r--@ 1 jmichaelmoshell admin 108 Jan 6 03:26 hello.html

Note: The –la means "show hidden files and details".

The files with a dot in front of their names are hidden from ls.

The details include privileges, creator, owner, size, date, name.

-24 -

Initialize the repository

project0>git init

Initialized empty Git repository in /Applications/MAMP/

htdocs/DIG4104c/project0/.git

project0>ls -latotal 632

drwxr-xr-x 9 jmichaelmoshell admin 170 Jan 6 03:28 .

drwxr-xr-x 14 jmichaelmoshell admin 136 Jan 6 03:28 ..

drwxr-xr-x 4 jmichaelmoshell admin 340 Jan 6: 03:35 .git

drwxr-xr-x 4 jmichaelmoshell admin 313470 Dec 29 15:16 earth.gif

drwxr-xr-x 4 jmichaelmoshell admin 1300 Jan 5 126:51 example.dragdrop.html

-rw-r--r--@ 1 jmichaelmoshell admin 108 Jan 6 03:26 hello.html

-25 -

Initial Commit

>git add *

>git commit –m 'Initial project version’

[master (root-commit) dda0064] Initial project version

3 files changed, 67 insertions(+)

create mode 100644 earth.gif

create mode 100644 example.dragdrop.html

create mode 100644 hello.html

-26 -

Initial Commit

>git add *

>git commit –m 'Initial project version’

[master (root-commit) dda0064] Initial project version

3 files changed, 67 insertions(+)

create mode 100644 earth.gif

create mode 100644 example.dragdrop.html

create mode 100644 hello.html

If you omit the commit message

git will open an editor. You won’t like it...

-27 -

Edit ‘hello.html’.

Previous version just had

<h2>Hi there world!</h2>

New version adds

<p>Adding some body text</p>

I saved it, so now the working directory

does not match the repository.

-28 -

Compare workspace to committed version

>git diff

JMMairBook:Project0 jmichaelmoshell$ git diff

diff --git a/hello.html b/hello.html

index fa40afe..ea0287b 100644

--- a/hello.html

+++ b/hello.html

@@ -5,5 +5,6 @@

</head>

<body>

<h1>Hi there world!</h1>

+<p>Adding some body text</p>

</body>

</html>

-29 -

Add hello.html to the staging area

>git add hello.html

> // no message here; it's just staged

>git status

# On branch master

# Changes to be committed:

# (use "git reset HEAD <file>..." to unstage)

#

# modified: hello.html

#

-30 -

Commit the change

>git commit –m 'Added body text.'

[master 53ad16a] Added body text.

1 file changed, 1 insertion(+)

-31 -

Look at the log of changes>git logcommit 53ad16afe185db2dec9c95ef4e4cfe01e0befc41

Author: Mike Moshell <jm.moshell@regmaster.com>

Date: Sun Aug 26 16:13:31 2012 -0400

Added body text.

commit bb39112feb93c26395450bf5cb0f74af64346867

Author: Mike Moshell <jm.moshell@regmaster.com>

Date: Sat Aug 25 14:54:04 2012 -0400

Initial project version

The log is in reverse chronological order (newest first)

-32 -

In the Lab, you will repeat this

“Warm-up” procedure on hello.html and then ...

Begin creating, staging and committing your

code for Project 1 ...

WHICH is our next topic.