1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida...
-
Upload
philomena-douglas -
Category
Documents
-
view
213 -
download
1
Transcript of 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida...
![Page 1: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/1.jpg)
1
Web Design Workshop
DIG 4104c
Spring 2014Dr. J. Michael Moshell
University of Central Florida
Lecture 2:
The git source control systemwww.redbugbblle.com
![Page 2: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/2.jpg)
-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
![Page 3: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/3.jpg)
-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:
![Page 4: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/4.jpg)
-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.
![Page 5: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/5.jpg)
-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?
![Page 6: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/6.jpg)
-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)
![Page 7: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/7.jpg)
-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.
![Page 8: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/8.jpg)
-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.
![Page 9: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/9.jpg)
-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.
![Page 10: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/10.jpg)
-10 -
The Team model, with a central repository (old way of doing it)
![Page 11: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/11.jpg)
-11 -
The Distributed model, with local repositories
![Page 12: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/12.jpg)
-12 -
Our "beginner model", for Project 1
this part
not used
for Project
One
![Page 13: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/13.jpg)
-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.
![Page 14: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/14.jpg)
-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.
![Page 15: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/15.jpg)
-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)
![Page 16: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/16.jpg)
-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.
![Page 17: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/17.jpg)
-17 -
Using the Command Line Interface
(“Console”)
On Mac:
![Page 18: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/18.jpg)
-18 -
Using the Command Line Interface
(“Console”)On PC:You access the Run command by holding down the
Windows logo key and pressing R.
![Page 19: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/19.jpg)
-19 -
OR you can use the ‘unix-like shell’called Gitbash
![Page 20: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/20.jpg)
-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 [email protected]
![Page 21: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/21.jpg)
-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
![Page 22: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/22.jpg)
-22 -
Looking Around
>ls (or, if you’re using windows, >dir)
earth.gif example.dragdrop.html hello.html
![Page 23: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/23.jpg)
-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.
![Page 24: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/24.jpg)
-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
![Page 25: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/25.jpg)
-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
![Page 26: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/26.jpg)
-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...
![Page 27: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/27.jpg)
-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.
![Page 28: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/28.jpg)
-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>
![Page 29: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/29.jpg)
-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
#
![Page 30: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/30.jpg)
-30 -
Commit the change
>git commit –m 'Added body text.'
[master 53ad16a] Added body text.
1 file changed, 1 insertion(+)
![Page 31: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/31.jpg)
-31 -
Look at the log of changes>git logcommit 53ad16afe185db2dec9c95ef4e4cfe01e0befc41
Author: Mike Moshell <[email protected]>
Date: Sun Aug 26 16:13:31 2012 -0400
Added body text.
commit bb39112feb93c26395450bf5cb0f74af64346867
Author: Mike Moshell <[email protected]>
Date: Sat Aug 25 14:54:04 2012 -0400
Initial project version
The log is in reverse chronological order (newest first)
![Page 32: 1 Web Design Workshop DIG 4104c Spring 2014 Dr. J. Michael Moshell University of Central Florida Lecture 2: The git source control system .](https://reader031.fdocuments.us/reader031/viewer/2022032801/56649dd95503460f94acf746/html5/thumbnails/32.jpg)
-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.