-
Notifications
You must be signed in to change notification settings - Fork 1
/
trythis.html
252 lines (229 loc) · 15.9 KB
/
trythis.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This is the community playbook created by Benetech's Code Alliance program. Social Good 2.0.">
<meta name="author" content="code alliance, benetech, deep datta">
<title>Code Alliance Community Playbook</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
<img src="img/logo.png" style="height:45px; margin-top:-10px;" alt="Code Alliance logo white;" />
</a>
</li>
<li><a href="home.html">Home</a></li>
<li><a href="github.html">GitHub 101</a></li>
<li><a href="code-learning.html">Code Learning</a></li>
<li><a href="programming-languages.html">Programming Languages</a></li>
<li><a href="service-enterprise-model.html">Service Enterprise Model</a></li>
<li><a href="bootstrap.html">Bootstrap Websites</a></li>
<li><a href="fundraising-platforms.html">Fundraising Platforms</a></li>
<li><a href="developer-roles.html">Developer Roles</a></li>
<li><a href="open-source-licenses.html">Open Source Licenses</a></li>
<li><a href="event-types.html">Types of Coding Events</a></li>
<li><a href="email.html">Email Services</a></li>
<li><a href="social-media.html">Social Media</a></li>
<li><a href="videos.html">Video Services</a></li>
<li><a href="free-images.html">Copyright Free Images</a></li>
<li><a href="analytics.html">Google Analytics</a></li>
<li><a href="salesforce.html">Salesforce</a></li>
<li><a href="confluence.html">Confluence</a></li>
<li><a href="jira.html">JIRA</a></li>
<li><a href="cloud-deployment.html">Cloud Deploy Services</a></li>
<li><a href="hosting-services.html">Website Hosting</a></li>
<li><a href="content-management.html">Content Management Websites</a></li>
<li><a href="wysiwyg.html">WSYIWYG Editing Websites</a></li>
<li><a href="databases.html">Databases</a></li>
<li><a href="seo.html">SEO</a></li>
<li><a href="mobile-development.html">Mobile Development</a></li>
<li><a href="a11y.html">Coding for Accessibility</a></li>
<li><a href="survey-tools.html">Survey Tools</a></li>
<li><a href="project-summary.html">Create a Project Doc</a></li>
<li><a href="volunteer-websites.html">Volunteer Websites</a></li>
<li><a href="prototyping-tools.html">Prototyping Tools</a></li>
<li><a href="marketing-tools.html">Marketing Tools</a></li>
<li><a href="nonprofit-types.html">Nonprofit Types</a></li>
<li><a href="trythis.html">Try This!</a></li>
<li><a href="http://www.linkedin.com/in/shantanudeepdatta"><span style="font-size:12px;">Deep Datta</span></a></li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Top Navigation -->
<div style="width:100%; height:50px; background-color:white; border-bottom:1px solid black;">
<ul class="main-nav">
<li>
<a href="#menu-toggle" id="menu-toggle" style="padding:50px; color:white;"><img src="img/navbars.png" style=" margin-left:-30px; height:30px;" alt="Toggle Menu Bar" /></a>
</li>
<li><a href="how-to.html">How To Use This Guide</a></li>
<li><a href="how-to-contribute.html">How To Contribute</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="project-summary-examples.html">Project Summary Examples</a></li>
<li><a href="services.html">Other Services</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Try This!</h1>
<p>On this page, we offer some basic tutorials on incorporating various open source Web technologies into your nonprofit's online presence.</p>
<div class="mamp"><a name="mamp"></a>
<h2>Try This #1: Create a MySQL Database Using MAMP</h2>
<p>MacOSX users can create MySQL databases for use with dynamic Web content using MAMP, a well-known platform stack software bundle for use with MacOSX. (MAMP stands for "MacOSX, Apache, MySQL, PHP/Perl/Python"). For a quick tutorial on MySQL database creation using MAMP, watch the following video:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/lHkjm52sJys" frameborder="0" allowfullscreen></iframe>
</div><hr style="border:1px solid #EEE;">
<div class="mysqlform"><a name="mysqlform"></a>
<h2>Try This #2: Create an HTML Form To Submit Data to a MySQL Database</h2>
<p>For this tutorial, we're going to set up a basic MySQL database system where you can submit data using HTML/PHP.</p>
<p>You will need to install XAMPP, a free open source PHP development framework available for Windows, Linux, and MacOSX. I will be using XAMPP for Windows for the purposes of this tutorial. You can download and install XAMPP by going to <a href="https://www.apachefriends.org/index.html">https://www.apachefriends.org/index.html</a>.</p>
<p>We'll proceed with this tutorial under the assumption that you are using XAMPP 1.7.3, but installing and operating the software is very similar for all releases. Just make sure you have Apache, MySQL, PHP, and PHPAdmin installed at the very minimum.</p>
<img src="http://devtuts.butlerccwebdev.net/testserver/xampp-cpanel-running.png" />
<p>Start your XAMPP control panel, and then start the Apache and MySQL services. In the photo above, we can see that the two services are running.</p>
<img src="http://i1.wp.com/complete-concrete-concise.com/wp-content/uploads/2011/03/xamppmysqlmainpagephpmyadminurl_thumb.png?resize=484%2C376" />
<p>Next, open your browser and log on to "http://localhost/phpmyadmin" to open the PHPMyAdmin tool. Before we can use our MySQL PHP system, we must first set up the database itself.</p>
<img src="http://i1.wp.com/complete-concrete-concise.com/wp-content/uploads/2011/03/xamppmysqlmainpageenterdatabasename_thumb.png?resize=484%2C373" />
<p>The "MySQL localhost" section has a submit form for you to create a new database. We are going to make an employee records database, so underneath "Create new database," type in "employees1" and click the Create button. Unless you require specific field formatting/encoding options for your new database, you can just leave the other settings as is.</p>
<img src="http://i0.wp.com/complete-concrete-concise.com/wp-content/uploads/2011/03/xamppmysqldatabasecreated_thumb.png?resize=484%2C374" />
<p>If the database creation was successful, you'll see the above graphic in your portal.</p>
<img src="http://html.net/tutorials/php/lesson18_img02.png" />
<p>Next, we need to set up a table in our database. Click on the Database tab in your main portal. You will see a list of databases. We created a database named "employees1." Click on the "employees1"</p>
<img src="http://html.net/tutorials/php/lesson18_img03.png" />
<p>You will see a box similar to this one asking you to designate the name of and number of fields in your table. For the name, enter "employees1" and for the number of fields, type "4" and hit "Go."</p>
<img src="http://html.net/tutorials/php/lesson18_img04.png" />
<p>You will then see a box to set options for your data fields. Ordinarily, you would set an id field as your primary key (this would be akin to the unique employee records at an organization which are usually numbered). If you wished to do that, you can set the first field with the Name of "id," the Type of "INT," the Index of "PRIMARY," and the A_I (auto increment) checkbox set to "checked." For our purposes, we'll set the following fields like this:</p>
<ul>
<li>Field 1- Field: "first_name", Type: "VARCHAR", Length: "255"</li>
<li>Field 2- Field: "last_name", Type: "VARCHAR", Length: "255"</li>
<li>Field 3- Field: "department", Type: "VARCHAR", Length: "255"</li>
<li>Field 4- Field: "email", Type: "VARCHAR", Length: "255", Index: "PRIMARY"</li>
</ul>
<p>Once you've entered those values in for the fields, click the Save button to save your new table. Now you are ready to start using your database, so let's get to coding.</p>
<p>The first thing you want to do is navigate to the directory where XAMPP was saved when you installed the program. Open that directory, and then open the htdocs/ directory inside of it. Once you're in htdocs/, create a new directory named "addemp." Inside of there, we will create two PHP script files.</p>
<p>Open your favorite text-based editor and create two new files called "index.php" and "process.php." Save them both in your xampp/htdocs/addemp/ directory.</p>
<p>In your index.php file, we need to add code to make a text submission form. So go ahead and add the following code (resize the box as much as you need):</p>
<textarea readonly>
<!DOCTYPE html>
<html>
<head>
<style>
label{display:inline-block;width:100px;margin-bottom:10px;}
</style>
<title>
Add Employee
</title>
</head>
<body>
<!-- Form object for you to enter data and submit it to the database -->
<form method="post" action="process.php">
<label>First Name</label>
<input type="text" name="first_name" />
<br />
<label>Last Name</label>
<input type="text" name="last_name" />
<br />
<label>Department</label>
<input type="text" name="department" />
<br />
<label>Email</label>
<input type="text" name="email" />
<br />
<input type="submit" value="Add Employee" />
</form>
</body>
</html>
</textarea>
<p>Next, we need to add code into our main database script, process.php. When the "Add Employee" button is clicked in index.php, the data submitted into the form will be added to our employees1 database table with an HTTP POST call. Put the following code into process.php (again, resize the box as much as you need):</p>
<textarea readonly>
<?php
//attempt an SQL connection
//you would normally fill in the mysqli_connect parameters with your hostname, username, password, and database
$connect=mysqli_connect('localhost','root','','employees1');
//exit if we cannot connect
if($connect === false)
{
die("Failed to connect" . mysqli_connect_error());
}
// create a variable and escape user inputs for security (prevent SQL injection attacks, etc.)
$first_name=mysqli_real_escape_string($connect, $_POST['first_name']);
$last_name=mysqli_real_escape_string($connect, $_POST['last_name']);
$department=mysqli_real_escape_string($connect, $_POST['department']);
$email=mysqli_real_escape_string($connect, $_POST['email']);
//string to use when making the sql call
$sql_call = "INSERT INTO employees1 (first_name,last_name,department,email) VALUES ('$first_name','$last_name','$department','$email')";
//Attempt to execute the query
if (mysqli_query($connect,$sql_call)){
//if we were able to add the record to the table
if(mysqli_affected_rows($connect) > 0){
echo "<p>Employee Added</p>";
echo '<a href="index.php">Go Back</a>';
} else {
echo "Employee NOT Added<br />";
echo mysqli_error ($connect);
}
} else{
echo "ERROR: Could not execute $sql_call" . mysqli_error($connect);
}
//close the connection when we are done
mysqli_close($connect);
?>
</textarea>
<p>Now that we have our code implemented, go ahead and test it out. Open up your browser and log on to "http://localhost/addemp/index.php." If you haven't already done so, make sure to start Apache and MySQL in XAMPP first.</p>
<img src="http://www.eduonix.com/blog/wp-content/uploads/2014/03/v310.jpg" style="width:550px;"/>
<p>You will have a screen that looks similar to this. You can fill out whatever you like in the fields. For test purposes, I'm adding a first name of "Test," a last name of "Name," a department of "President," and an email of "[email protected]." Once you've entered data, click "Add Employee."</p>
<img src="https://www.eduonix.com/blog/wp-content/uploads/2014/03/v162.jpg" style="width:550px;"/>
<p>If the database successfully added the data, you will see this screen.</p>
<img src="trythis/addemp/imgs/firstStepVerify.png" style="width:550px;" />
<p>Open up PHPMyAdmin and click on the database we've added (employees1) on the left pane. [It's highlighted for you for this demo screenshot.]</p>
<img src="trythis/addemp/imgs/secondStepVerify.png" style="width:550px;" />
<p>Next, click on the "employees1" table we added earlier.</p>
<img src="trythis/addemp/imgs/thirdStepVerify.png" style="width:550px;" />
<p>If we were successful, our new data will appear in the table (as my test data appears here).</p>
<p>And there you have it. You have just made a MySQL database that can be populated with data using a HTML/PHP webform. This is a simple example that you can obviously tweak and tailor to your needs.</p>
<p>SOURCES CITED IN THIS TUTORIAL:</p>
<ul>
<li><a href="https://www.eduonix.com/blog/web-programming-tutorials/learn-submit-html-data-mysql-database-using-php/">https://www.eduonix.com/blog/web-programming-tutorials/learn-submit-html-data-mysql-database-using-php/</a></li>
<li><a href="http://html.net/tutorials/php/lesson18.php">http://html.net/tutorials/php/lesson18.php</a></li>
<li><a href="http://www.complete-concrete-concise.com/web-tools/creating-a-mysql-database-using-xampp">http://www.complete-concrete-concise.com/web-tools/creating-a-mysql-database-using-xampp</a></li>
<li><a href="http://devtuts.butlerccwebdev.net/testserver/using-xampp-control-panel.html">http://devtuts.butlerccwebdev.net/testserver/using-xampp-control-panel.html</a></li>
</ul>
</div><hr style="border:1px solid #CCC;"/>
<p>All Try This tutorial code is available on our community-playbook Github repo. You assume all responsibility and/or liability in using any or all of this code in your organization or enterprise. Always remember to abide by best coding practices and local regulations to keep your systems secure and operational. When in doubt, consult with your IT/developer staff or external sources like Stack Overflow.</p>
<!-- End Languages -->
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>