IntroductionWelcome| 00:04 | Hi! My name is David Gassner and I'd like to
welcome you to Dreamweaver CS5 with PHP and MySQL.
| | 00:12 | For many web site developers who have
learned how to build simple web sites with
| | 00:16 | HTML and CSS, the next step is to add
dynamic capabilities with application
| | 00:22 | servers and databases.
| | 00:24 | Dreamweaver CS5 offers powerful support
for integrating one of the most popular
| | 00:28 | combinations of such software, PHP and MySQL.
| | 00:33 | In this video series, I'll show you how
to use Dreamweaver CS5's new PHP code
| | 00:39 | hinting capabilities.
| | 00:41 | Then I'll describe how to generate PHP
code that connects to MySQL, retrieves
| | 00:47 | and displays data from the server, and
inserts, updates, and deletes data based on
| | 00:52 | information provided by a web site visitor,
| | 00:55 | and show you how to authenticate your
site visitors and provide access to your
| | 00:59 | web pages on an as needed basis.
| | 01:03 | This video series is designed for
developers who are already comfortable with
| | 01:06 | the basic building blocks of all web sites.
| | 01:10 | I hope it will help you jumpstart your
knowledge and use of advanced tools, the
| | 01:15 | PHP application server, and language and
the MySQL database, and help you quickly
| | 01:20 | create the code you need to integrate
these tools into your own web sites.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | Before we get started with this video
series, I'd like to talk a little bit
| | 00:04 | about how the course is
designed and who it's designed for.
| | 00:08 | Dreamweaver is primarily a design
environment. It helps you build visually
| | 00:12 | compelling web sites and integrate
HTML and cascading style sheets together,
| | 00:18 | but in addition, Dreamweaver can help
you work with dynamic application servers,
| | 00:23 | including Adobe's own ColdFusion,
Microsoft's Active Server Pages, or ASP, and PHP
| | 00:31 | the open-source application
server that this course focuses on.
| | 00:35 | The course is designed for developers
who already have some background with
| | 00:38 | Dreamweaver and want to incorporate PHP
and MySQL to develop data-driven web sites.
| | 00:46 | For developers who are new to SQL and PHP,
Dreamweaver can help you minimize the
| | 00:51 | amount of required hand-coding
and for those who do know PHP;
| | 00:56 | Dreamweaver will help you with code
hinting and syntax-checking capabilities.
| | 01:01 | Before working through this course,
you should already know how to create a
| | 01:05 | simple web site in
Dreamweaver that uses static HTML pages.
| | 01:10 | You should have a background with
cascading style sheets, or CSS, that's used to
| | 01:14 | define the appearance of a web page.
| | 01:17 | You do not need to know
how to code in PHP or SQL.
| | 01:22 | All of the server-side code used in
this course is either generated by
| | 01:26 | Dreamweaver or is hand-coded with
plenty of explanation of how it works.
| | 01:31 | Before you take this course, if you're
new to Dreamweaver, I recommend watching
| | 01:36 | the appropriate introductory video series;
| | 01:39 | Dreamweaver CS5 or Dreamweaver CS6
Essential Training, which you can find in the
| | 01:44 | lynda.com online training library, and
after you watch this course, if you're
| | 01:49 | interested in learning more about PHP
and MySQL, lynda.com has plenty of content
| | 01:55 | on these subjects, including PHP with
MySQL Essential Training, PHP with MySQL
| | 02:02 | Beyond the Basics, and MySQL Essential Training.
| | 02:06 | These courses will help you take your
server-side coding skills to the next level.
| | 02:11 | Now let's move onto the course,
Dreamweaver with PHP and MySQL.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Just a quick word about the
exercise files I'll be using.
| | 00:03 | If you're a premium member of the lynda.com
online training library, or if you're
| | 00:08 | watching this tutorial on a disk, you
have access to the exercise files used
| | 00:12 | throughout this title.
| | 00:14 | In the Exercise Files folder I've
collected some assets for you to use during
| | 00:19 | our tour of building dynamic web
sites with Dreamweaver and PHP.
| | 00:23 | They include graphic files, an SQL
script to create a sample database, and
| | 00:30 | starting web page files for use in the
sample web sites that I'll be creating.
| | 00:34 | I've copied the folder to my Desktop,
but you can put it wherever you want.
| | 00:38 | To get started with the video series,
you'll need to follow the instructions in
| | 00:41 | Chapter 1, where I describe how to
install the server software you'll need;
| | 00:46 | WAMP Server for Windows or MAMP for Mac OS X.
| | 00:50 | From that point forward, you can choose
to work through the entire video series
| | 00:54 | from start to finish, or if you'd like
to jump in at a particular chapter, you
| | 00:59 | can use the starter files for that chapter.
| | 01:02 | In some chapters, such as Chapter 2, I have an
entire new version of a site for each exercise.
| | 01:07 | In other chapters, such as those
working with databases, I've created a single
| | 01:12 | copy of the web site that
you'll use throughout the chapter.
| | 01:15 | For these chapters especially, I
recommend always watching the first video of
| | 01:20 | the chapter, since I frequently give
instructions for configuring the new
| | 01:23 | version of this site before launching
into the chapter's individual exercises.
| | 01:28 | If you don't have access to the
exercise files, you can still follow along the
| | 01:33 | instructions and demonstrations on
screen and use any files you want as you
| | 01:37 | create your own dynamic web site.
| | Collapse this transcript |
| Understanding the differences between Dreamweaver CS5.5 and CS6| 00:00 | This video is intended for
users of Dreamweaver CS6.
| | 00:04 | If you're using Dreamweaver CS5 or
Dreamweaver CS5.5, you can skip this video
| | 00:09 | and go on to the rest of the course.
| | 00:12 | This video series was originally
recorded in Dreamweaver CS5, but everything I
| | 00:17 | teach in the series can be done with
all three versions of Dreamweaver it
| | 00:20 | targets, CS5, CS5.5 and Dreamweaver CS6.
| | 00:26 | However, Dreamweaver CS6 introduced a
couple of minor user interface changes
| | 00:31 | rearrangements and re-labeling of
buttons that I'm going to talk about here.
| | 00:36 | I'm looking at Dreamweaver CS5.
| | 00:38 | Notice in Dreamweaver CS5, there is a
button called Live Code and another
| | 00:42 | one called Live View.
| | 00:44 | The intent in Dreamweaver CS5 was
that you should first click the Live View
| | 00:49 | button to trigger a deployment tier
testing server and then a display of
| | 00:54 | the finished web site.
| | 00:56 | You could also then click the Live Code
button and you'd see the generated code
| | 01:01 | coming from the PHP page.
| | 01:03 | To get out of this state, you would
click Live Code again, and Live View.
| | 01:09 | In Dreamweaver CS6, the Live View and
Live Code buttons have been replaced by a
| | 01:14 | single button labeled Live.
| | 01:17 | When you click the Live button in
Dreamweaver CS6, it's just like clicking Live
| | 01:22 | View in CS5 and 5.5. Just like those
versions, you might be prompted to Update
| | 01:28 | the copy of your code on the testing
server and to copy dependent files over,
| | 01:33 | but then you will see the
resulting web site displayed.
| | 01:37 | The Live Code button is still there,
but in CS6 it only appears when you're
| | 01:41 | already in Live View, and you'll see it
here, and just like in CS5, it results in
| | 01:47 | showing the generated code from the PHP page.
| | 01:51 | Here is another minor user
interface difference from CS5 to CS6.
| | 01:56 | To create a brand new site, you can go to
the Menu and choose Site > Manage Sites.
| | 02:02 | In the Manage Sites dialog in Dreamweaver CS5,
you then click a button named New,
| | 02:08 | and you'll see the buttons
stacked from top to bottom.
| | 02:11 | When you click the New button that
takes you into the Site Setup dialog.
| | 02:16 | In Dreamweaver CS6, to get to the Site
Setup dialog, you use the same exact menu
| | 02:21 | sequence, choose Site > Manage Sites,
and you'll see that the Manage Sites
| | 02:27 | dialog has been redesigned.
| | 02:29 | Instead of a set of buttons that were
stacked vertically, you'll see descriptive
| | 02:33 | buttons laid out horizontally at
the bottom of the dialog box and some
| | 02:37 | operations are now assigned to icons,
the minus icon for deleting a site
| | 02:42 | definition, the pencil for editing, and so on.
| | 02:45 | In this video series, I'll
describe how to create a new site.
| | 02:50 | In CS5, you click the button labeled
New, but in CS6 you click New Site.
| | 02:56 | The functionality however is exactly the
same, and that's pretty much it for
| | 03:01 | differences in user interface from CS5 to CS6,
at least in regards to this video series.
| | 03:08 | All of the other functionality that
I described, such as connecting to
| | 03:12 | databases, creating bindings, using
server behaviors and using the Files, Assets
| | 03:19 | and Snippets panels, work exactly the
same and look the same as in the older
| | 03:24 | version of the software.
| | Collapse this transcript |
|
|
1. Understanding Browsers, Servers, and DatabasesUnderstanding static vs. dynamic web pages | 00:00 | Whenever you incorporate a dynamic
application server into a web site, it's
| | 00:05 | important to understand how the process works.
| | 00:08 | First, let's talk about
how static web sites operate.
| | 00:12 | A static web site is a collection of
web pages, Cascading Style Sheet files,
| | 00:17 | image files, and other related assets.
| | 00:21 | All of these assets are stored on a
server and then delivered to web clients such
| | 00:25 | as browsers, using a kind of
software called an HTTP server.
| | 00:30 | There are number of popular HTTP
servers on the market, but the two most common
| | 00:35 | are Internet Information Services, or
IIS, a free web server that's included
| | 00:41 | with the Windows Operating System, and Apache,
| | 00:44 | a free open source HTTP server
product which is used on pretty much all
| | 00:49 | operating systems, including Windows,
Linux, Mac OS X, and other flavors of UNIX.
| | 00:57 | With static web sites, a client, such
as a web browser stored on a personal
| | 01:02 | computer or a mobile
device, sends an HTTP request.
| | 01:08 | HTTP stands for Hypertext Transfer Protocol.
| | 01:11 | The format of the request is in a URL,
which stands for Uniform Resource Locator.
| | 01:18 | A URL could be http://www.lynda.com.
| | 01:24 | That would mean that the request
is going to the default directory on
| | 01:28 | lynda.com's web site.
| | 01:30 | The server receives this request
and then figures out what it means.
| | 01:35 | The request typically points to a
particular file on the server's disk.
| | 01:39 | The server retrieves the file, opens
it up, gets its content, and sends that
| | 01:45 | content back to the client as an HTTP response.
| | 01:48 | Here is a little diagram
that shows how it works.
| | 01:52 | The client sends the request to the server.
| | 01:56 | The request is in the form of the URL.
| | 01:59 | The server finds the file and
sends its content back to the client.
| | 02:04 | So that's a static web site.
| | 02:07 | When you mix in an application
server, your web site becomes dynamic.
| | 02:12 | The application server software, such as
PHP, ColdFusion, or ASP, is installed on
| | 02:18 | the same physical computer,
typically, as the HTTP server software.
| | 02:23 | The client, that is the web browser,
once again sends an HTTP request,
| | 02:28 | formatted as a URL.
| | 02:31 | The client doesn't know that there
is an application server involved.
| | 02:35 | The request looks exactly the same to
the web browser, regardless of whether the
| | 02:39 | web site is dynamic or static.
| | 02:42 | The HTTP server software receives this
request, but instead of responding to
| | 02:47 | it directly, as it does with a static
web site, it dispatches the request to
| | 02:51 | the application server.
| | 02:53 | It knows how to do this by looking
at the file extension in the URL.
| | 02:57 | If the file extension is .cfm,
| | 03:00 | that's a request for the ColdFusion
Server. .asp would be for Active Server
| | 03:05 | Pages, .aspx for ASP.NET and
.php for the PHP application server.
| | 03:13 | The Application Server works with
server-side resources, such as databases, XML
| | 03:19 | files. and other content, and then
dynamically constructs an HTTP response. which
| | 03:24 | is sent back to the client.
| | 03:26 | Once again, here is a
diagram that shows how it works.
| | 03:30 | The client sends the request to
the server, formatted as a URL,
| | 03:35 | the HTTP server receives the
request, and now dispatches it to the
| | 03:39 | Application Server,
| | 03:41 | the Application Server might work with the
database on the server to get some content.
| | 03:46 | The data is returned to the Application Server.
| | 03:49 | The Application Server constructs an HTTP
response, returns that to the HTTP server;
| | 03:56 | and the HTTP server returns
the content to the client.
| | 04:00 | Once again, the important thing
here is that the client doesn't know an
| | 04:03 | application server is involved;
| | 04:05 | its relationship is directly to the HTTP server.
| | 04:09 | So that's how dynamic web
sites differ from static web sites.
| | 04:13 | Once you involve an application
server, such as PHP, your HTTP response,
| | 04:18 | typically in the form of HTML, or
Hypertext Markup Language, is constructed
| | 04:23 | dynamically by the application server,
instead of stored statically in a
| | 04:28 | document on the HTTP server's hard disk.
| | Collapse this transcript |
| Selecting application and database servers| 00:00 | In this video series, I'm going to
describe using Dreamweaver CS5 with PHP and
| | 00:05 | MySQL, but if you're new to the world
of web application development, you might
| | 00:10 | be wondering about what other
server software is available.
| | 00:13 | When you choose software for your server,
the choice is driven by a number of factors.
| | 00:19 | Probably the single most important
factor is your existing experience and
| | 00:23 | expertise, either yours
personally, or your organization's.
| | 00:27 | If an organization, for example,
already uses ASP.NET everywhere else, they're
| | 00:32 | unlikely to choose a new application
server just because it has a particular
| | 00:36 | feature that might be interesting.
| | 00:38 | Another factor is the
operating system of the server itself.
| | 00:42 | ASP.NET and ASP for
Microsoft only work on Windows.
| | 00:46 | Other application servers
work on many operating systems.
| | 00:50 | You might also be influenced by the
available programming languages supported by
| | 00:54 | a particular server.
| | 00:56 | And finally, there is cost.
| | 00:58 | Certain server software is free, and
other packages require license fees.
| | 01:03 | There are three elements of
the server stack to choose:
| | 01:07 | the HTTP server, which receives request
and sends responses with the client or a
| | 01:12 | web browser, the application
server where you do most of your server
| | 01:16 | programming, and the database server.
| | 01:18 | Here are the available
choices for an HTTP server.
| | 01:22 | There are many HTTP server products on
the market, but there are two primary
| | 01:27 | products that dominate the landscape.
| | 01:30 | On the Windows platform, you have
Internet Information Services, also known as IIS.
| | 01:35 | This is a Microsoft product that's
included with all copies of Windows
| | 01:40 | server-based operating systems.
| | 01:43 | And then the other major choice is Apache.
| | 01:45 | Apache is completely free and open source,
and it works with all major operating
| | 01:50 | systems, including Windows,
Linux, Mac OS X, and many others.
| | 01:56 | You can download Apache for
free from http://www.apache.org.
| | 02:03 | You don't need to register or
otherwise report the usage of this software.
| | 02:09 | You can also get Apache in many bundle
distributions that include Apache, PHP, and MySQL.
| | 02:15 | I'll describe these in a separate video.
| | 02:20 | When choosing an application server,
if you already know you'll be working on
| | 02:24 | the Windows platform, you can look at
either Active Server Pages, or ASP, or the
| | 02:29 | more recent ASP.NET.
| | 02:32 | These products only work on the
Windows platform, although particularly with
| | 02:37 | ASP.NET, there is a distribution
that's built by a third party called Mono
| | 02:41 | that works on Linux.
| | 02:42 | If you're working in Active Server Pages,
you'll be working with the languages
| | 02:46 | VBScript or JScript, and if you're
working with ASP.NET, you'll most likely be
| | 02:51 | working with either C# or VB.NET.
| | 02:55 | ASP and ASP.NET are included
with all copies of the Windows
| | 03:00 | server-based operating systems.
| | 03:02 | Technically, they aren't free,
because you have to pay for Windows, but
| | 03:06 | they're both lower cost than other
application servers that you have to pay a
| | 03:10 | separate license fee for.
| | 03:12 | You can also choose Java-based
servers, known as Java EE or Java
| | 03:16 | Enterprise Edition.
| | 03:18 | These were formerly known as J2EE.
| | 03:21 | Examples of Java Enterprise Edition
Servers include JBoss, Tomcat, WebLogic,
| | 03:27 | GlassFish, and Geronimo.
| | 03:30 | All of these servers work on multiple
operating systems, including Windows, Mac,
| | 03:34 | and Linux, and they all require
knowledge of, and use of the Java programming
| | 03:39 | language, which is distinct from
JavaScript, the language you use in the browser.
| | 03:44 | Some of these products are free, such as
JBoss, Tomcat, and GlassFish, and others
| | 03:50 | require license fees, such as WebLogic.
| | 03:54 | There is also Adobe ColdFusion, which
works on multiple operating systems, and
| | 03:58 | works with all of the popular
HTTP servers, such as Apache and IIS.
| | 04:03 | When you work in ColdFusion, you'll
be using its proprietary language,
| | 04:07 | ColdFusion Markup Language,
or CFML, a tag-based language.
| | 04:12 | Adobe ColdFusion requires a separate license
fee, and it's available from Adobe systems.
| | 04:18 | And finally, there is PHP.
| | 04:20 | PHP works on multiple
operating systems, just like ColdFusion.
| | 04:24 | It has its own programming
language, also called PHP.
| | 04:28 | It's commonly paired with the MySQL
database server, and it's completely
| | 04:33 | free and open source.
| | 04:34 | In this video series, I'll be working
with PHP exclusively, although Dreamweaver
| | 04:39 | CS5 does have very strong
support for Adobe ColdFusion.
| | 04:44 | Finally, there is the database server.
| | 04:46 | One of the most popular database
servers out there is Microsoft SQL Server.
| | 04:51 | It operates only on the Windows
platform, and the enterprise edition
| | 04:56 | requires license fees.
| | 04:58 | There is a community edition
of Microsoft SQL Server that has
| | 05:01 | limited capabilities.
| | 05:03 | There is also Oracle, sometimes known as
the 800-pound gorilla of the database world.
| | 05:08 | Oracle works on multiple operating
systems, including Windows and Linux, and
| | 05:13 | there are license fees involved in using it.
| | 05:16 | It's also very complex to set up and maintain.
| | 05:19 | So, if you're planning a small-scale
web site, you probably won't be interested
| | 05:23 | in this database platform.
| | 05:26 | Finally, there is MySQL,
also known as my sequel.
| | 05:31 | The community edition of MySQL is free.
| | 05:34 | You can download it from www.mysql.com.
| | 05:38 | You also see MySQL frequently included in
web site plans from Internet service providers.
| | 05:44 | If you rent a shared web site at one
of these ISPs, you'll typically see both
| | 05:49 | PHP and MySQL support included.
| | 05:51 | MySQL, once again, is frequently used
with PHP, and it's included in many server
| | 05:58 | bundle distributions that include both
PHP and Apache, and I'll talk a lot more
| | 06:03 | about these server bundles and
about the entire concept of multi-tier
| | 06:07 | applications in a separate video.
| | Collapse this transcript |
| Introducing Apache, MySQL, and PHP | 00:00 | In a previous video, I described the
available server software that you can
| | 00:04 | choose from, and I specifically talked
about Apache, PHP, and MySQL, the three
| | 00:11 | elements that together are
known as the AMP technology.
| | 00:15 | I'd like to talk a little bit here
about the nature of multi-tier applications,
| | 00:19 | which is how we describe the
architecture used in web-based applications.
| | 00:24 | Multi-tier means that there are
multiple elements that go into building a
| | 00:28 | web-based application.
| | 00:30 | The client tier is the first tier.
| | 00:33 | It's the one that the user interacts
with directly, and it typically consists of
| | 00:37 | a web browser hosted on a personal
computer or other Internet connected device.
| | 00:43 | On the server, there are three major tiers:
| | 00:46 | the web tier, or Gateway, which
receives request from the client, typically
| | 00:50 | implemented as an HTTP server; the
business tier, which contains the business
| | 00:55 | logic on the server, typically
implemented in an application server; and the
| | 01:00 | data tier, typically implemented in a database
server, such as MySQL, SQL Server or Oracle.
| | 01:08 | The client tier is the web browser,
and its associated technologies.
| | 01:12 | The web browser itself sends requests,
receives responses, and renders HTML, or
| | 01:19 | Hyper Text Markup Language, images,
Cascading Style Sheets and other content
| | 01:24 | that it's capable of rendering directly.
| | 01:27 | It also hosts plug-in components.
| | 01:30 | So it can execute both native client-
side code in the form of JavaScript and
| | 01:35 | also embedded code that's
executed by the plug-ins.
| | 01:38 | For example, Flash Player is used to render
Flash content that uses ActionScript code.
| | 01:44 | All of this taken together
is known as the client tier.
| | 01:48 | The server part of a multi-tier
application is implemented with multiple
| | 01:52 | software packages that are designed
to work together using web standards.
| | 01:57 | The first tier is known as the web
tier, or The HTTP server, and once again, it
| | 02:01 | receives the request from the
client and returns the response.
| | 02:05 | Many of these responses are text-
based, including HTML, Hyper Text Markup
| | 02:10 | Language, and XML, Extensible Markup Language.
| | 02:14 | Other content returned by the HTTP
server would include binary files, such as
| | 02:19 | images and Flash SWF files.
| | 02:23 | The business tier is the application
server and once again the data tier is
| | 02:27 | the database server.
| | 02:28 | In a server environment that uses AMP
technologies, the web server is Apache,
| | 02:35 | the application server is PHP,
and the database server is MySQL.
| | 02:41 | If you choose, you can download native
versions of the server software packages.
| | 02:46 | The three packages together are
known as the AMP technology stack.
| | 02:51 | You'll typically see them called WAMP,
if they're hosted on Windows, LAMP on
| | 02:55 | Linux, and MAMP on Mac OS X. If you
want to download and install each element
| | 03:01 | of the server stack individually, you can
go to the web sites that host these packages.
| | 03:07 | You'll find the Apache software at
www.apache.org, PHP at php.net, and MySQL at mysql.com.
| | 03:18 | If you download these individual
software packages, it's up to you to configure
| | 03:23 | them to work together.
| | 03:25 | Depending on which operating system
you're working on and which installer you
| | 03:28 | download, you'll get a certain
amount of help in configuring them to work
| | 03:32 | together. But if you want to get
launched very quickly, you can instead choose
| | 03:37 | to use a server bundle.
| | 03:39 | A server bundle allows you to get started
very quickly with almost no configuration.
| | 03:45 | All of the server bundles I'm going
to recommend here are free to download
| | 03:48 | and use, and once you download, you
can install them and get started using
| | 03:53 | them almost instantly.
| | 03:55 | If you're working on Windows, I
recommend WampServer, which you'll find at
| | 03:59 | www.wampserver.com/en.
| | 04:03 | This is the server bundle that I'll
be using in all of the demonstrations
| | 04:06 | in this video series.
| | 04:08 | I typically do my web development on
the Windows platform, and this is my
| | 04:12 | favorite server bundle for Windows,
because it's so easy to install and so
| | 04:17 | tough to get wrong.
| | 04:18 | If I'm working on Mac OS X, I
typically choose MAMP, which you'll find at
| | 04:23 | www.mamp.info/en, and I'll give you
complete instructions in this video series
| | 04:30 | about how to install MAMP, and how
to use it during the video series.
| | 04:35 | Even though most of my demonstrations
will be shown on Windows with WAMP server,
| | 04:39 | I'll mention how you should adapt
those instructions if you're using MAMP.
| | 04:44 | There are other options though, that I
won't be using in this video series, but
| | 04:48 | are worth checking out.
| | 04:49 | There are two packages in particular that
are designated from multiple operating systems.
| | 04:55 | The first is called Xampp, X-a-m-p-p.
| | 04:59 | You'll find this at
www.apachefriends.org/en/xampp.html.
| | 05:08 | There are versions of the Xampp
server for both Mac OS X and for Windows.
| | 05:13 | They're named the same, but they actually
have different sets of software in them.
| | 05:18 | They both include Apache, PHP, and MySQL,
but they have different options and
| | 05:23 | different user interfaces for managing them.
| | 05:25 | And finally, there is the Zend
Server Community Edition, available at
| | 05:30 | www.zend.com/en/products/server-ce.
| | 05:39 | The Zend Server Community Edition is
probably the most complete of these server bundles.
| | 05:43 | In addition to Apache, PHP, and MySQL,
it also contains the complete Zend
| | 05:50 | framework, a set of open source PHP-
based tools that can simplify your use of
| | 05:56 | the PHP application server.
| | 05:59 | I'm not using the Zend Server
Community Edition package in this video series,
| | 06:03 | only because it's a little bit more
complex to set up, particularly on Mac OS X,
| | 06:08 | but if you get serious about doing PHP
development, particularly if you learn
| | 06:13 | how to hand-code PHP and get into more
complex application options, I find that
| | 06:19 | the Zend server package is the
most powerful of any of these options.
| | 06:24 | To summarize though, I'll be
using WampServer on Windows for these
| | 06:28 | demonstrations, and I'll be
mentioning along the way how to adapt my
| | 06:31 | instructions if you're using MAMP on Mac OS X.
| | Collapse this transcript |
| Installing Apache, MySQL, and PHP| 00:00 | To follow along with the exercises in
this video series, you'll need to install
| | 00:04 | a local copy of the Apache HTTP
server, the MySQL database, and PHP.
| | 00:11 | There is a video course that teaches how to
install these products locally that I created.
| | 00:16 | It's named Installing Apache, MySQL,
and PHP, and it's available completely free
| | 00:22 | in the lynda.com online training library.
| | 00:25 | In this course, there is an
introductory chapter including a video about
| | 00:29 | understanding Apache, MySQL and
PHP and how they can work together.
| | 00:34 | But then there are separate
chapters on each of the different ways to
| | 00:37 | install these products.
| | 00:38 | There is a chapter on installing
separate components on Windows, and one on
| | 00:43 | separate components for Mac OS X, but
if you're watching the video series about
| | 00:47 | Dreamweaver with PHP and MySQL and want
to match what I'm showing on my screen,
| | 00:54 | if you're a Windows user, I recommend
installing WAMP server, and if you're a Mac
| | 00:58 | user I recommend installing MAMP.
| | 01:01 | You should only have to watch and
follow along with one of these two chapters.
| | 01:06 | Don't install both separate components
and one of these software bundles at the
| | 01:10 | same time, because you might introduce
port or DLO conflicts into your system
| | 01:16 | and have a hard time getting things
started, but if you follow along in these
| | 01:20 | chapters, you should be able
to get started very quickly.
| | 01:24 | And if you have any trouble getting
these software products installed and set up,
| | 01:28 | you can also watch the chapter at
the end labeled troubleshooting.
| | 01:32 | I periodically update this course on
installing these products, as things
| | 01:37 | change in the real world.
| | 01:38 | For example, there's a new version of
PHP as of the time of this recording, PHP
| | 01:44 | 5.4, and I'll be doing an update to
this course to describe how to get started
| | 01:49 | with that version if you want to use it.
| | 01:52 | So watch this course to get started
installing the software products and then
| | 01:56 | once you have them installed and tested,
come back to the course, Dreamweaver
| | 02:00 | with PHP and MySQL, and continue
through those exercises to learn how to work
| | 02:06 | with PHP and MySQL from
within Dreamweaver CS5, 5.5 or CS6.
| | Collapse this transcript |
|
|
2. Getting Started with Dreamweaver and PHPDefining a Dreamweaver site| 00:00 | To get started building a web site
that's associated with PHP, you define
| | 00:05 | a Dreamweaver site.
| | 00:07 | The first part of the process is the
same, regardless of whether your site is
| | 00:11 | static or dynamic within application server.
| | 00:14 | In Dreamweaver CS5, I'll go to
the Menu and select Site > New Site.
| | 00:20 | You can also get to this Site Setup
dialog by going through the Menu and
| | 00:23 | selecting Site > Manage Sites
and then clicking the New button.
| | 00:29 | In the Site Setup dialog, you'll set
the site name and the local site folder,
| | 00:34 | I'm going to name my site DW CS5 with
PHP and MySQL. You can name the site
| | 00:42 | anything you want and you
can include spaces in the name.
| | 00:46 | Then set the local site folder to
the physical location of the site root,
| | 00:51 | I'll click the browse icon and I'll
start at the Exercise Files folder, which
| | 00:58 | I'll find on my Desktop.
| | 01:00 | From there, I'll go down to 02_
gettingstarted to 01_definesite, where I have a
| | 01:07 | complete set of site
files, and I'll click Select.
| | 01:11 | For a static site that's all you have to do.
| | 01:14 | Now let's take a look at other elements of
the Site Setup dialog in Dreamweaver CS5.
| | 01:20 | The Servers category lets you
setup your remote and testing servers.
| | 01:24 | The testing server is the server that
you work with on your local computer.
| | 01:28 | The remote server is the production
server where you host the web site
| | 01:33 | for external users.
| | 01:35 | I'll describe how to use this part of
the site setup dialog in a separate video.
| | 01:40 | The Version Control category lets you
connect to a subversion repository, so you
| | 01:45 | can manage your site files, checking
them in, checking them out, and rolling back
| | 01:50 | to previous versions.
| | 01:52 | In the Advanced Settings folder you'll
find settings for Local Info, Cloaking,
| | 01:58 | Design Notes, and so on.
| | 02:00 | These settings aren't specific to the
world of PHP or application servers, so I
| | 02:04 | won't be describing them in
detail in this video series.
| | 02:07 | I'll click Save and that creates the
new site, and then if I started from the
| | 02:12 | Manage Sites dialog, I need to click Done.
| | 02:16 | In the Files panel I should now see a
complete listing of the site's assets.
| | 02:20 | HTML, image, CSS files, and so on.
| | 02:24 | I'll click Expand button and that
will show me a larger view of the files
| | 02:29 | that are available.
| | 02:30 | I'm working with my local file set.
| | 02:33 | Here is the homepage of
the existing site, index.htm;
| | 02:38 | I'll double-click it to open it.
| | 02:40 | Then I can test the page either
through the Live View button, which opens the
| | 02:44 | file directly from the hard disk, or if
I prefer, I can deselect Live View and
| | 02:50 | then go to the Preview button and
select a particular browser, such as Firefox.
| | 02:56 | Regardless of whether I use
Live View or an external browser,
| | 03:00 | notice that I'm testing the files by
loading them directly from the hard disk.
| | 03:05 | For a PHP-based site though, there's
a little bit more work to do, setting
| | 03:10 | up the testing server, and then
testing the PHP pages by calling them from
| | 03:15 | DHTTP server, rather than the hard
disk, and I'll describe how to set that
| | 03:19 | up in another video.
| | Collapse this transcript |
| Configuring a PHP testing server| 00:00 | When you create a Dreamweaver site
that's designed to work with PHP, there are
| | 00:05 | some additional steps you'll need to
follow to associate the site with your PHP
| | 00:09 | server on your local system.
| | 00:11 | I'll start with the site that's already
been created named, DW CS5 with PHP and MySQL.
| | 00:17 | I'll go to the Menu and
choose Site > Manage Sites.
| | 00:22 | Then with my site definition
selected I will click Edit.
| | 00:25 | Before I can figure the testing servers,
I will reset the Local Site Folder for
| | 00:30 | this site definition to
another copy of the site files.
| | 00:33 | I will click the Browse icon, then I
will go up one level in the disk file
| | 00:39 | system to the 02_gettingstarted chapter
folder and then go down to the exercise
| | 00:44 | folder, 02_testingserver,
and then I will click Select.
| | 00:49 | I will click Save, and if see this
message that the cache will be recreated, I
| | 00:54 | will click OK and then click Done.
| | 00:59 | That's a process you will need to
follow on each exercise, re-pointing the site
| | 01:04 | definition to the files for that
exercise, and then looking at the Files panel, I
| | 01:10 | will confirm that I have a full
set of files in that directory.
| | 01:13 | Here are the steps for
setting up the testing server.
| | 01:17 | I'll return to Manage Sites dialog and with
the site definition selected, I will click Edit.
| | 01:23 | I will go to the Servers category.
| | 01:26 | In the Servers list, I will
click the plus icon to add a new server.
| | 01:30 | I am going to be working with my copy
of PHP and Apache on my local system.
| | 01:37 | So I am going to name the
server simply, Local Server.
| | 01:41 | You can name the server
anything you want at this point.
| | 01:44 | For this option, Connect using, I will
choose Local/Network, meaning that I'll be
| | 01:50 | connecting to the Server's hard
disk through the local file system.
| | 01:53 | I'm going to set up a Server Folder
which will be under my server document root.
| | 01:59 | On Windows with WAMP server, this will
be C:\wamp\www, and on Mac using MAMP, it
| | 02:08 | will be /Applications/MAMP/htdocs.
| | 02:13 | I am working on Windows with WAMP
server, so I will click the Browse icon;
| | 02:18 | I will start off at the
computer in the C drive root.
| | 02:23 | From there I will go down
to wamp and then to www.
| | 02:27 | If you are working on Mac,
browse to /Applications/MAMP/htdocs.
| | 02:34 | Create a new folder;
| | 02:36 | this will be the testing
folder for the current site.
| | 02:39 | I'm going to name it dwwithphp.
| | 02:42 | The name of this folder should contain
no spaces and should be all lowercase.
| | 02:47 | I'll click Open and then click Select,
and that sets the Server folder to the
| | 02:52 | location on disk where I'm
going to copy my files for testing.
| | 02:57 | Then click into the Web URL.
| | 02:59 | The web URL will be the same
regardless of whether you're working with
| | 03:02 | WAMP server or MAMP.
| | 03:04 | It'll be http://localhost/dwwithphp.
| | 03:11 | You are matching the name of the
folder in the web URL to the name of the
| | 03:15 | folder in the server.
| | 03:17 | Local host points to the server's
document route and the rest of the directory
| | 03:22 | name is relative to that location.
| | 03:24 | Next click Advanced at the top of the screen.
| | 03:28 | Don't worry about the Remote Server settings.
| | 03:30 | We are setting up a testing server.
| | 03:32 | So under Testing Server, pull down
the list of available server models
| | 03:37 | and choose PHP MySQL.
| | 03:41 | Click Save, that takes
you back to the server list.
| | 03:45 | With your new server selected,
uncheck Remote and check Testing.
| | 03:50 | This means that the server will only
be used for testing and we won't be
| | 03:55 | actively uploading files for production.
| | 03:57 | Later on if you need to make changes to
this server definition, you can reopen
| | 04:01 | this dialog box and click the
Edit button in the form of a pencil.
| | 04:07 | I'll Save all of my changes and then
click OK, and then in the Manage Sites
| | 04:12 | dialog, I will click Done.
| | 04:15 | I'll show you what happens when you
test a page from a PHP associated site.
| | 04:19 | I'll open the file index.htm and
then I'll test in an external browser.
| | 04:25 | I will go to the Preview/Debug button in
the toolbar and choose Preview in Firefox.
| | 04:33 | Notice that I am asked whether I want
to update the file on the testing server.
| | 04:37 | You may or may not see this
dialog depending on how you have
| | 04:40 | Dreamweaver configured.
| | 04:42 | If you do see it, click on Yes, and then in
the Dependent Files dialog, click on Yes again.
| | 04:48 | If you don't see these dialog boxes,
asking you whether you want to copy files
| | 04:52 | to the testing server, you can turn them
on in Dreamweaver's Preferences dialog box.
| | 04:59 | Once you open the Preferences dialog,
go to the Site category and check the
| | 05:04 | option, prompt input/check in.
| | 05:08 | Click OK to save your changes and
preview the page in an external browser again.
| | 05:13 | You should see the dialog boxes appear.
| | 05:16 | When the page opens in the browser, if you
don't see any graphics, click the browsers
| | 05:21 | Refresh button to make sure
you're seeing the latest version.
| | 05:25 | That means that before you test the
page, Dreamweaver will make a copy of the
| | 05:30 | page in your web directory along with
any files on which it depends, graphics,
| | 05:36 | cascading style sheets, XML,
Flash content, and so on.
| | 05:41 | In the external browser, take a look at the
web address that's been used to test the page.
| | 05:46 | Notice that you're browsing the page
by requesting it from the web server,
| | 05:50 | through the local host address, not
loading the file from the local disk.
| | 05:56 | This will enable the web server to
dispatch requests for dynamic pages, such as
| | 06:00 | PHP pages, to the appropriate
application server for processing.
| | 06:06 | Now I'll close the browser and
return to Dreamweaver and close this page.
| | 06:11 | Now let's see what happens with a PHP page.
| | 06:13 | I will go to the Files panel to the
index.htm file which is the homepage.
| | 06:19 | Then I will rename it, I will right-
click on it and choose Edit > Rename, and I
| | 06:27 | will change the name of the
file from index.htm to index.php.
| | 06:32 | When I press Enter or Return,
Dreamweaver detects all of the references to
| | 06:37 | this page in any of the other pages of the site
and asks me whether I want to update the links.
| | 06:43 | I will click Update and Dreamweaver
accomplishes the update throughout the site,
| | 06:49 | and then I'll double quick index.php
and I'll run the page in the browser.
| | 06:56 | Once again I'm asked whether I want to
update the copy on the testing server and
| | 07:00 | in the secondary dialog, whether
I want to put the dependent files.
| | 07:03 | I will click Yes for both dialogs,
and now I should say that the browser is
| | 07:10 | loading the PHP version.
| | 07:12 | So if you've gotten this far, you're
successfully testing your PHP file by
| | 07:17 | requesting it from the web server,
which dispatches the request to the PHP
| | 07:22 | server, which processes the file and
sends content back to the client, the
| | 07:27 | browser, through the HTTP server.
| | 07:30 | If you're having trouble with this,
make sure that your server is running, either
| | 07:34 | WAMP server or MAMP, and also make sure
that you can load HTML files correctly
| | 07:40 | using the localhost web address.
| | 07:42 | If everything is working, you're ready
to start creating your own PHP pages.
| | Collapse this transcript |
| Creating and testing a PHP-based web page| 00:00 | Once you've defined your Dreamweaver
site and associated it with your PHP
| | 00:04 | server, you can start
creating brand new PHP pages.
| | 00:08 | For the remainder of this video series,
I'll work with Dreamweaver in a new
| | 00:12 | workspace named App DeveloperPlus. You
can get to this work space by opening the
| | 00:17 | workspace selector on the top
toolbar of Dreamweaver and choosing App
| | 00:22 | DeveloperPlus. You should
see the following layout:
| | 00:25 | CSS Styles and AP Elements at the top,
Files, Assets and Snippets at the bottom
| | 00:31 | on the left, and then miniature
buttons that allow you to open panels like
| | 00:35 | Insert, Databases,
Bindings and Server Behaviors.
| | 00:41 | For this demonstration, I'll point my
site definition to a new folder, I'll go to
| | 00:47 | the Menu and choose Site > Manage
Sites and then click Edit with the selected
| | 00:52 | site, then for the local site
folder I'll click the icon to browse.
| | 00:57 | If you worked through the previous
video, your folder will be pointed
| | 01:00 | to 02_testingserver.
| | 01:02 | I'll go up one folder from there
and then down to 03_newphppage.
| | 01:09 | I'll click Select and Save, and then
click OK to close the cache notification
| | 01:14 | dialog and click Done.
| | 01:18 | The Files panel in this workspace
appears in the lower left corner.
| | 01:22 | You should see all of the site files
and the PHP-based homepage, index.php.
| | 01:29 | Now the goal of this demonstration is to
create a brand new PHP page from scratch.
| | 01:34 | From the Menu choose File > New.
| | 01:38 | In the New Document dialog choose
Blank Page category and then down at
| | 01:42 | the bottom choose PHP.
| | 01:45 | If you're creating a page for your own
site, you might want to use one of the
| | 01:49 | standard layouts provided in Dreamweaver CS5.
| | 01:52 | These layouts make very good use
of cascading style sheets, or CSS, to
| | 01:57 | accomplish their layouts.
| | 01:59 | You can choose any of these and your
file will be created as a PHP file.
| | 02:04 | I'm not going to use any particular
layout though, because I want to keep this
| | 02:07 | exercise very simple and focused. So
I'll set the layout to None and click
| | 02:12 | Create, then I'll go into Code view.
| | 02:14 | As I've mentioned previously, a PHP
page is nothing more than an HTML page.
| | 02:21 | When you create a brand new PHP page
from scratch in Dreamweaver, you end up
| | 02:26 | with a skeleton of an HTML page.
| | 02:28 | I'm going to set the title of this page,
changing it from Untitled Documents to
| | 02:33 | PHP Info, then I'll save the
file, selecting File > Save As,
| | 02:40 | and I'll name it phpinfo.php, because I
designated this as a PHP file from the beginning.
| | 02:47 | If I didn't add the file extension at
this point, Dreamweaver would add .php for
| | 02:52 | me, I'll click Save.
| | 02:56 | Now I'm going to use a very simple PHP
command that outputs information about
| | 03:01 | the configuration and
version number of my PHP server.
| | 03:05 | I'll place the cursor after the
starting body tag and press Enter a few times,
| | 03:10 | and place the cursor between the body tags.
| | 03:13 | then I'll go to the Insert panel, I'll
click the Insert button, and in the panel
| | 03:19 | I'll pull down the list of
available options and choose PHP.
| | 03:24 | The Insert panel will help
you insert standard PHP code.
| | 03:28 | I'm going to add a Code Block by
clicking once, make sure you only click once,
| | 03:34 | if you double-click, you'll
get two copies of the code.
| | 03:37 | Then I'll click back on the page and
the Insert panel will shrink back down
| | 03:42 | into its original place.
| | 03:44 | A PHP Code Block looks like this, its
starts with a less than character and a
| | 03:48 | question mark and then the phrase php
in lowercase, and it ends with a question
| | 03:53 | mark and a greater than character.
| | 03:55 | Within the PHP code block,
you can add your own PHP code. I'm going
| | 04:01 | to add a function called PHP info.
I'll type php and then using Dreamweaver
| | 04:07 | CS5 new code hinting capabilities, I'll
hold down the Ctrl key and press the Spacebar.
| | 04:13 | Dreamweaver CS5 brings up a listing of all of
its known commands that start with the term PHP.
| | 04:20 | I'll type IN and I'll find three items that I
could add that have php and ini;
| | 04:27 | I'll press the down arrow
twice to move down the phpinfo.
| | 04:31 | Notice that Dreamweaver CS5
gives you help automatically.
| | 04:36 | This is the PHP project's own online
help that's being displayed, and it'll
| | 04:41 | tell you a lot about the different PHP
commands that are available and how to use them.
| | 04:45 | I'll press Enter to choose phpinfo, and
then type in a closing parenthesis, I'm
| | 04:52 | going to call the phpinfo
function without passing in any values.
| | 04:57 | Now I'll save the file, selecting
File > Save, and then I'll look at the
| | 05:01 | page using Live View.
| | 05:04 | Now before you use Live View, make
sure that you can see the browser toolbar,
| | 05:09 | if you can't, you can right-click on
any of the toolbars and choose this item
| | 05:13 | Browser Navigation.
| | 05:15 | The Browser Navigation toolbar will
show you what the URL is that you're
| | 05:18 | browsing to within Dreamweaver, click Live View.
| | 05:22 | If you see the dialog box asking you to
update the copy on the testing server,
| | 05:26 | click Yes and then click
Yes again for dependent files.
| | 05:31 | On the right, you should see design view
open up and show the resulting output to
| | 05:36 | the browser. Go to the toolbar and
click Design, and that will allow the Design
| | 05:41 | view to take up the full available area.
| | 05:44 | The phpinfo function outputs the
current version number of your PHP server and
| | 05:49 | all sorts of other configuration information.
| | 05:52 | One of the most important things you
should know, is the location of your php.ini
| | 05:58 | file, that's the PHP configuration file.
| | 06:02 | I'm working on Windows with WAMP server,
so my PHP file is located in my Apache
| | 06:07 | 2.2.11/bin directory.
| | 06:11 | If you're working with MAMP on Mac,
the location will be different.
| | 06:15 | Now I'll go back to Code
view and see the actual output.
| | 06:18 | So in this exercise, you've created
your first dynamic PHP page, you've
| | 06:24 | embedded dynamic PHP server-side code
in the page, and at runtime, the PHP server
| | 06:31 | executes the phpinfo function and outputs a
bunch of very complex information to the browser.
| | 06:37 | Here's another way of executing the
page through the external browser that I'll
| | 06:41 | give you a little bit more
information about what's going on.
| | 06:44 | I'll deselect Live View, then go to the
Preview button and choose my favorite browser.
| | 06:51 | Once again I'll copy files to
the server directory and here's the
| | 06:55 | phpinfo display again.
| | 06:57 | In the browser, I'll view the source.
In Firefox, you can do this by selecting
| | 07:02 | View > Page Source.
| | 07:06 | I'll expand the size of the font so we
can see it more easily, because I want to
| | 07:11 | show you that that single function
phpinfo actually outputs an entire web page,
| | 07:17 | starting at this point with the doc
type and going all the way down to almost
| | 07:23 | the bottom of the page, to this ending HTML tag.
| | 07:27 | This tells me that if you're using the
PHP function, you don't need the rest
| | 07:32 | of the HTML structure.
| | 07:34 | So I'll close the browser, go back to
phpinfo.php and I'll delete everything
| | 07:40 | except the PHP command. I'll save the
change, run the page in the browser again,
| | 07:47 | once again copying files as needed.
I'll view the source and this time I only
| | 07:55 | see the output of the phpinfo page.
| | 07:59 | As I'll show you in the other
exercises, most of the time in your actual
| | 08:04 | production pages, you'll be mixing
your own custom HTML and cascading style
| | 08:08 | sheets with your PHP commands to
output information, but the phpinfo function
| | 08:14 | is a critical tool that can help you
find out what's going on, on your PHP
| | 08:18 | server, which version of PHP you're
running, and a lot of information about its
| | 08:23 | configuration.
| | Collapse this transcript |
| Adding PHP commands with the Insert panel| 00:00 | Dreamweaver gives you the ability
to insert simple PHP commands fairly
| | 00:04 | automatically, using either
the menu or the Insert panel.
| | 00:08 | For this demonstration, I'll use files
in a copy of this site in the folder
| | 00:13 | 02_gettingstarted > 04_insertphpcode.
| | 00:17 | And I'll work with this file, helloworld.php.
| | 00:22 | This file already has a .PHP extension
and when I look at it in Live View, which
| | 00:30 | results in copying the file over to
my server folder, and browse the file
| | 00:34 | through the localhost URL,
| | 00:37 | I'll see that the file is shown with the
simple text "Hello World" in a content area.
| | 00:42 | I'm going to show you how to replace
that literal text with a simple PHP command.
| | 00:48 | Here is the text inside a pair of <h1> tags.
| | 00:50 | I'm going to remove that text, and
then I'm going to use one of the most
| | 00:55 | fundamental PHP commands,
| | 00:57 | the echo command, to output a
literal string into the browser.
| | 01:02 | To do this from the menu, select Insert
> PHP Objects, and then choose Echo, or if
| | 01:10 | you prefer, you can use the Insert panel,
switch to the PHP category, and then
| | 01:16 | once again, choose Echo.
| | 01:19 | I'll click once on the Echo selection.
That inserts a PHP code block and adds the echo command.
| | 01:26 | After the Echo command, you can add to
the echo command any literal string or
| | 01:31 | any variable or dynamic
expression that will evaluate to a string.
| | 01:35 | I'm going to pass in the value
Hello World, wrapped in quotes.
| | 01:40 | I'll save my changes and then I'll
look at the file again in Live View.
| | 01:44 | I'll exit Live View and then, enter it again.
| | 01:47 | Notice that the file was once again
being copied to the testing server, and then
| | 01:51 | I'll go to Design View, and I'll
see exactly the same text output.
| | 01:56 | Now to see this in an external browser,
I'll go to the Browser button in the
| | 01:59 | toolbar, and I'll select my favorite browser -
| | 02:03 | I usually use Firefox for testing -
| | 02:06 | go through the copying dialogs,
and once again there is the output.
| | 02:10 | Now, here is the important thing to
understand about the echo command.
| | 02:13 | I'll look at the Page in the Source View, and
here is the text that's being output by
| | 02:18 | the echo command. By the time
gets to the browser, it's just text.
| | 02:24 | I'll go back and make a
simple change to the code.
| | 02:27 | I'll go to the Code View, and I'll
change the text to Hello World from PHP.
| | 02:33 | I'll browse the page.
| | 02:35 | If prompted, I'll say Yes I want to
save the file, and I want to copy it.
| | 02:40 | And now the text is output in the browser,
exactly as I typed it in the echo command.
| | 02:45 | And once again, I'll show you Source
View and show that that's the text that's
| | 02:49 | output, and that the
browser receives simple text.
| | 02:52 | Again, the important thing to
understand about PHP and all web application
| | 02:56 | servers is that the commands that
you execute that are a part of the
| | 02:59 | server-based language, such as PHP, are
executed on the server, and the browser
| | 03:05 | doesn't know anything about them.
| | 03:06 | The browser receives the resulting
HTML markup, including any text that
| | 03:12 | you output.
| | Collapse this transcript |
| Setting and outputting simple variables| 00:00 | While most of this video series deals with
PHP code that's generated by Dreamweaver,
| | 00:05 | it's useful to know a
little bit about hand-coding PHP.
| | 00:09 | So I'm going to show you how to set a
simple variable, and then how to output the
| | 00:13 | value of that variable in a web page.
| | 00:16 | I'll be working with files in the
folder 02_gettingstarted > 05_variables, and
| | 00:24 | I'll open the file in that folder, variables.php.
| | 00:28 | Let's take a look at the existing code.
| | 00:30 | In this file, there is just simple use
of the echo command that's outputting the
| | 00:34 | literal string Hello World from PHP.
| | 00:37 | I'm going to show you how to set a
simple variable that contains that same value.
| | 00:41 | A variable is like a
little bucket of information.
| | 00:45 | All programming languages support them,
but the way you declare and set the
| | 00:49 | value of a variable in each
programming language differs.
| | 00:52 | You can set a variable anywhere in a
PHP page, but wherever you set it, the
| | 00:57 | variable will only be
available from that point downward.
| | 01:01 | So I'm going to place the cursor at
the top of my page in Code View and then
| | 01:05 | press Enter or Return a couple of
times to make some blank space.
| | 01:09 | And then I'll move the
cursor up to the top of the page.
| | 01:13 | Then I'll go to my Insert panel, and
I'll choose the PHP category, and then
| | 01:19 | I'll choose Code Block.
| | 01:21 | And that adds a simple PHP code block.
| | 01:23 | Then I'll press Enter a couple of times
to make a blank line, and within the PHP
| | 01:29 | code block, I'll set a
simple variable, named Hello World.
| | 01:33 | You can name your variables anything you
want, but you should always prefix them
| | 01:37 | with the Dollar sign.
| | 01:38 | Notice when I type the Dollar sign into
Dreamweaver CS5 that I get a list of a
| | 01:43 | number of existing variable that are
always a part of the PHP environment, such
| | 01:48 | as COOKIE, ENV, FILES, GET, POST, and so on.
| | 01:51 | We'll get to some of these later.
| | 01:54 | For now, I'm creating my own
variable, and I'll name it welcome.
| | 01:59 | I'll set the value of the variable to
"Welcome to my homepage," and I'll end the
| | 02:04 | declaration with a semicolon.
| | 02:07 | Notice as I type the Dreamweaver CS5
checks for syntax errors, and if the page
| | 02:12 | is clean, it shows me the
message, No syntax errors.
| | 02:16 | If I remove something from the
statement that makes it syntactically incorrect,
| | 02:20 | Dreamweaver immediately shows
that there is a syntax error.
| | 02:24 | I'll put that code back in, and
Dreamweaver removes the error message.
| | 02:29 | To use that variable, I'll go down to
the echo command where I'm outputting a
| | 02:33 | literal string, and I'll remove the
literal string, I'll type the Dollar sign
| | 02:38 | and then a W, and Dreamweaver CS5
shows me my variable, $welcome.
| | 02:44 | This is a new feature of Dreamweaver,
the ability to give you hints as to the
| | 02:48 | names of variables, functions, and other
elements of your preexisting PHP code.
| | 02:54 | I'll press Enter or Return, or click
with the mouse, and that inserts the
| | 02:59 | variable into my echo command.
| | 03:01 | I'll save the changes, and then I'll use
the external browser to look at the result.
| | 03:08 | The value of the welcome variable is
now output on the page, and because I
| | 03:12 | placed the echo command inside <h1>
tags, the text shows up as a title one.
| | 03:18 | I'll View the Selection Source in
Firefox, and I'll see that the value that's
| | 03:25 | output to the browser is the simple
text, because once again, the browser is not
| | 03:30 | capable of interpreting and executing PHP code.
| | 03:34 | So that's a look at how to set variables
using simple assignments statements, and
| | 03:40 | how to output the values of those
variables using the echo command.
| | 03:44 | You wrap both statements inside PHP
code blocks and then all of the processing
| | 03:49 | of the PHP commands happens on the
server, and the resulting HTML markup is
| | 03:54 | returned to the browser.
| | Collapse this transcript |
| Testing pages with Live view and Live Code view | 00:00 | I've shown you so far how to execute PHP
code on the server and then how to look
| | 00:05 | in the browser to see what's
returned from the server to the client.
| | 00:09 | You can also do this in
Dreamweaver using a feature called Live Code.
| | 00:14 | For this demonstration, I'll use a set
of files in the chapter 02_gettingstarted
| | 00:19 | and in the folder 06_liveview.
| | 00:23 | I'll set my site to point to
that folder, and then I'll open the
| | 00:27 | file variables.php.
| | 00:30 | This file has a bit of PHP code at the
top that sets a variable named welcome,
| | 00:35 | and then down in the content area of the
page, there is another PHP command that
| | 00:39 | uses the echo command to
output the value of the variable.
| | 00:42 | When I click the Live View button on
the toolbar, Dreamweaver copies the PHP
| | 00:48 | file over to the server folder, and then
shows the resulting output in Design View.
| | 00:53 | Let's take a look at the Live Code feature.
| | 00:56 | The Live Code feature shows the
resulting output in Code View.
| | 01:00 | This is very similar to what you get
in the browser when you say you want to
| | 01:04 | view the source, but you see
this all right here in Dreamweaver.
| | 01:09 | I'll click Live Code, and
now take a look at the result.
| | 01:12 | The initial PHP command up at the top of
the page is stripped out, and the PHP command
| | 01:18 | that's outputting the value of that
variable is replaced with the resulting text.
| | 01:23 | Now, I'll turn off the Live Code feature,
and I'll see the original PHP commands,
| | 01:28 | and turn it back on and see the output text.
| | 01:32 | So the purpose of the Live Code
feature is to allow you to see the resulting
| | 01:36 | HTML that's generated at the server, by
the combination of your HTML markup, your
| | 01:42 | Cascading Style Sheets, and your PHP commands.
| | 01:46 | You'll see the same result with JavaScript code.
| | 01:49 | That is if you have any dynamic
JavaScript code that's being executed in
| | 01:52 | the client that changes the content
of the HTML page at runtime, the Live
| | 01:57 | Code feature will detect that and
show with the browser is receiving, not
| | 02:02 | what was sent to the server.
| | 02:04 | It's an invaluable debugging tool
that's available in Dreamweaver CS5.
| | Collapse this transcript |
| Using server-side includes | 00:00 | Many PHP developers like to use a
feature of PHP named Server Side Includes.
| | 00:07 | This architecture lets you take
reusable code that you're using in many PHP
| | 00:11 | pages, and place them in files that
are then included at runtime on the
| | 00:15 | server in other pages.
| | 00:17 | For this demonstration, I'll
use a set of files in the folder
| | 00:20 | 02_gettingstarted > 07_includes.
| | 00:24 | I'll point my site at that root folder.
| | 00:27 | I'll start with this file, index.php.
| | 00:31 | Let's take a look at this
page in an external browser.
| | 00:34 | I'll copy the file over to the server
directory, and show you that the index.php
| | 00:39 | has a navigational toolbar on
the left, a logo up at the top,
| | 00:44 | and these two bits of content
together make up the page header.
| | 00:47 | This header is used in
multiple pages in the web site.
| | 00:51 | Similarly, at the bottom of the page,
there is a footer that contains a number
| | 00:55 | of hyperlinks and information.
| | 00:58 | Once again, this content is
repeated on multiple pages.
| | 01:01 | I'm going to show you how to take this
reusable content, put it into include
| | 01:06 | files, and then how to include
them in multiple pages at runtime.
| | 01:11 | First, I'll create the Include file.
| | 01:14 | I'll go to my site header in the Files panel,
right-click on it, and choose New Folder.
| | 01:21 | I'll name the folder _includes.
| | 01:24 | You don't need to include the
underscore prefix on your folder names, but it's
| | 01:28 | a common convention.
| | 01:30 | After renaming the file,
you might see it fly away,
| | 01:33 | that is, disappear from the
visible part of the screen.
| | 01:36 | If that happens, just
scroll up, and find it again.
| | 01:39 | Right-click on the new _includes
folder, and choose New File, and name the
| | 01:44 | new file header.php.
| | 01:47 | Then double-click on the new file to open it.
| | 01:49 | This will be included at runtime into
an existing PHP page, which already has
| | 01:54 | the main HTML page structure,
| | 01:57 | so you don't need this basic HTML
page structure in the included page.
| | 02:02 | So I'll select and delete
all of the existing code.
| | 02:06 | Then I'll go back to the homepage, index.php.
| | 02:09 | I'll look at the page in Design View.
| | 02:12 | I'm first going to take the content that
includes the logo up in the upper-left.
| | 02:17 | I'll click on the logo.
| | 02:18 | Then I'll go to my tag selector, below
the design area, and click on the div tag
| | 02:23 | with an id of header.
| | 02:26 | Then I'll go to Code View,
and see what I've selected.
| | 02:29 | Notice that that takes the div
tag only with the id of header.
| | 02:32 | What I really want is its
wrapping tag, main header.
| | 02:36 | So I'll hold down the Ctrl key on
Windows, or the Command key on Mac, and press
| | 02:40 | the Open Bracket key right next to
the letter P. That expands the selection
| | 02:45 | outward to include another parent tag.
| | 02:48 | I'll cut that content to the clipboard,
and go to header.php, and then paste it.
| | 02:54 | Then I'll press Enter, because I'm
going to be taking one more div tag that I
| | 02:58 | want to place below it.
| | 02:59 | I'll go back to index.php.
| | 03:02 | I'll select the div with an id of mainNav.
| | 03:05 | You can do this in Code View by
placing the cursor, and then pressing Ctrl or
| | 03:10 | Command, plus the Bracket key again, or you
can go to Design View, and use the tag selector.
| | 03:16 | Either way, you want to make sure that
you've selected the entire div tag that
| | 03:20 | contains all of the
hyperlinks for the side navigation bar.
| | 03:24 | Then once again, cut to the
clipboard, go to the header, and paste.
| | 03:29 | Then save your changes by pressing
Ctrl+S on Windows, or Command+S on Mac.
| | 03:35 | Then go back to index.php.
| | 03:38 | Make sure you've left the cursor in the
same location from where you cut that content.
| | 03:42 | Then you'll add the PHP Include command.
| | 03:46 | I'll go to the Insert panel, and select
the PHP category, and I'll choose Include.
| | 03:52 | You can actually choose either
Include or Require in this position.
| | 03:56 | These two commands do
pretty much the same thing.
| | 03:58 | They include a single page.
| | 04:00 | But the difference is that if the
Include page encounters an error, it will
| | 04:04 | output an error message
but keep processing the page;
| | 04:08 | whereas the Require command, if
it encounters an error, it will
| | 04:11 | terminate execution.
| | 04:13 | I'll choose the Include command.
| | 04:15 | This results in adding a PHP
code block and the Include function.
| | 04:20 | You pass into the Include function the name
and location of the file you want to include.
| | 04:24 | You wrap this in quotes.
| | 04:26 | So I'll type in a quote character,
and then the name of the folder
| | 04:30 | _includes/header.php.
| | 04:36 | Then I'll close the
string with a closing quote.
| | 04:39 | Dreamweaver sees then that there are no
syntax errors, and the error above the
| | 04:43 | editing area goes away.
| | 04:45 | I'll test my page in the external browser.
| | 04:48 | I'll save the change, and preview in Firefox.
| | 04:52 | This results in copying all of the files over
to the server, including the new Include file.
| | 04:57 | Then when the page is requested
from the browser, the PHP server opens
| | 05:01 | index.php, sees the Include command, and
puts the pages back together at runtime.
| | 05:08 | The result is that the page looks
exactly the same as it did before.
| | 05:11 | Now let's create a footer file.
| | 05:14 | I'll locate my _includes folder in
the Files panel, and create a new file.
| | 05:19 | I'll name the new file footer.
php, and double-click to open it.
| | 05:24 | I'll delete all of the code,
and then return to index.php.
| | 05:29 | This time, I'll do my selections in Design View.
| | 05:31 | I'll go to Design View, and
scroll down to the bottom.
| | 05:35 | I'll click anywhere in the footer area.
| | 05:38 | Then in the tag selector,
I'll choose div #footer.
| | 05:41 | Then I'll go to Code View,
and see what I've selected.
| | 05:43 | I've correctly selected the entire footer.
| | 05:47 | I'll cut it to the clipboard, go to
footer.php, and paste, and save my changes.
| | 05:54 | Then I'll go back to index.php.
| | 05:57 | I'll go back to the Insert
panel to the PHP category.
| | 06:01 | Once again, add an Include command.
| | 06:04 | This time, I'll include the new
footer.php file, using the string
| | 06:08 | _includes/footer.php.
| | 06:13 | This time, I'm going to
test only inside Dreamweaver.
| | 06:17 | I'll take a look at the page in Live View.
| | 06:19 | This copies the files
over to the testing server.
| | 06:21 | I'll look at the page in Design View.
| | 06:25 | I'll scroll down to the bottom, and
see that my footer is still intact.
| | 06:29 | Now I'll go to Code View, and show
you that in Code View, I'm seeing the
| | 06:33 | original PHP command.
| | 06:35 | But then, I'll switch to Live Code.
| | 06:38 | That results in replacing the PHP
Include command with the content that's being
| | 06:43 | processed at the server
and sent back to the browser.
| | 06:48 | So that's a look at how to create includes.
| | 06:50 | Once you've done this much, the next
step will be to go through all of the other
| | 06:54 | HTML pages and rename them with PHP extensions.
| | 06:58 | For example, I'll exit Live Code and Live View, and
| | 07:02 | then go to the Files panel, right-
click on mission.htm and rename it.
| | 07:08 | I'll rename it with a .php extension.
| | 07:11 | Dreamweaver will detect all of the
references to that page throughout the web
| | 07:15 | site, and let's you update them.
| | 07:17 | I'll do the same thing with
resources.htm and tours.htm.
| | 07:23 | Then I'll go through those pages, and
replace the literal headers and footers
| | 07:27 | with the references to the included files.
| | 07:31 | Once you've finished this process,
your web site will be much more
| | 07:34 | maintainable in the long term.
| | 07:36 | If you need to make a change to the
navigational toolbar or the footer, you make
| | 07:40 | a change to those PHP files,
and copy them to your server.
| | 07:45 | You don't need to do anything to the
files that are including them at runtime.
| | Collapse this transcript |
| Navigating included pages with the Code Navigator| 00:00 | The Code Navigator is a tool of
Dreamweaver CS5 that lets you navigate from a
| | 00:05 | top-level page to its included pages,
such as CSS files, JavaScript files, and
| | 00:12 | PHP Server Include files.
| | 00:14 | For this demonstration, I'll use a set
of files in the folder 02_gettingstarted
| | 00:19 | > 08_codenav, and I'll point my site to that
folder, and I'll open a file named mission.php.
| | 00:26 | I'll take a look at this file in Code
View, and show you that there are a couple
| | 00:31 | of PHP Include commands.
| | 00:33 | Up at the top, I'm including
header.php, and down at the bottom, I'm
| | 00:38 | including footer.php.
| | 00:40 | The purpose of the Code Navigator is to
allow you to navigate from one page to
| | 00:44 | another very easily.
| | 00:46 | In Dreamweaver CS5, up at the top, in the
toolbar, you'll see icons for each file
| | 00:51 | that's included in the main file.
| | 00:53 | These allow you to jump to, for
example, Cascading Style Sheet files, and
| | 00:58 | Server Side Includes,
such as my header and footer.
| | 01:00 | But the Code Navigator gives you
another simple way to navigate.
| | 01:05 | I'll go back to the Source Code icon,
which takes me to the main page, and
| | 01:09 | then look at the page in Design View, and
scroll down toward the bottom, where my footer is.
| | 01:15 | I'm going to click anywhere in the
footer and then wait two seconds.
| | 01:19 | You'll see a little graphical icon show up.
| | 01:22 | When you move the cursor over, you'll
see this message, Click indicator to
| | 01:25 | bring up the Code Navigator, and when
you click it, you'll see a hierarchical
| | 01:30 | display, showing you the name of the
current page and the name of any includes,
| | 01:35 | in this case footer.php.
| | 01:37 | You also see a listing of your
Cascading Style Sheet files and Cascading Style
| | 01:42 | Sheet rules that might be
affecting the currently selected content.
| | 01:46 | I'll click on footer.php, and
takes me to that included page.
| | 01:51 | You can also get to the
Code Navigator from Code View.
| | 01:54 | I'll go to Code View and go to the
first Include page, wait two seconds, and
| | 02:00 | there's the Code Navigator icon.
| | 02:02 | I'll click it, and there is the same display.
| | 02:05 | You can also get to the Code
Navigator from a Context menu.
| | 02:08 | I'll right-click on the code and choose Code
Navigator, and it gets me to the same place.
| | 02:13 | There are also keyboard shortcuts
and selections from the main menu.
| | 02:17 | So the Code Navigator lets you easily move
between a main page and any included pages.
| | 02:23 | In theory, it should be recursive,
meaning that you should be able to drill down
| | 02:28 | from one included page to
another, to another, and another.
| | 02:32 | There are some limitations that
Dreamweaver imposes, but for the most part it
| | 02:36 | will let you go anywhere in your
page hierarchy, regardless of whether the
| | 02:40 | includes are on the client, such as
with CSS files and JavaScript files, or on
| | 02:45 | the server, such as the
PHP Server Side Includes.
| | Collapse this transcript |
|
|
3. Managing PHP CodeUsing code hinting with PHP variables| 00:00 | One of the most useful new features in
Dreamweaver CS5 for PHP developers is code hinting.
| | 00:06 | For this demonstration, I'll use a set of files
in the folder 03_managingcode > 01_codehinting.
| | 00:14 | There's just one file in
this folder, phpinfo.php.
| | 00:18 | It has the PHP info command.
| | 00:21 | I'll run this file on the server by
clicking Live View and copying the file over
| | 00:25 | to the resting server, and show
you that the PHP info command outputs
| | 00:30 | information on the PHP server, such
as the build date of the server, the
| | 00:35 | operating system, the location
of the PHP INI file, and so on.
| | 00:40 | I'll exit Live View.
| | 00:44 | The code hinting feature gives you a
list of all of the commands in the PHP
| | 00:48 | language, variables and functions that
you have defined in your own file, and
| | 00:53 | also a lot more information.
| | 00:55 | I'm going to start in this exercise by
showing you how to use code hinting on
| | 01:00 | commands that are a part of PHP.
| | 01:03 | I'll place the cursor before the PHP
info command, and then I'm going to use a
| | 01:08 | feature called the date function.
| | 01:10 | The date function returns the
current date and time on the server.
| | 01:15 | I'll type in an echo command and then
type in the word "date." To get to code
| | 01:20 | hinting, press Ctrl+Space.
| | 01:22 | It's the same keyboard shortcut, regardless
of whether you're working on Windows or Mac.
| | 01:27 | The date function takes one required
argument and one optional argument.
| | 01:32 | The required argument is a format string that
designates how the date should be formatted.
| | 01:38 | When you press Ctrl+Space, you not
only a list of all of the function and
| | 01:42 | variable names that have the word
"date" in it, but when the item you want is
| | 01:47 | selected, you'll also get documentation.
| | 01:50 | I'm going to scroll down in the
documentation and show you that it provides a
| | 01:54 | list of all of the characters that
you can use in your format string.
| | 01:58 | So, for example, a lower d means
the current day as a numeric value
| | 02:04 | with leading zeroes.
| | 02:05 | The uppercase D means a text
representation of the day in three characters, such
| | 02:10 | as Mon for Monday. And the lower
case day is the day of the month without
| | 02:15 | leading zeroes, again numerically.
| | 02:17 | I'm going to output the current time,
| | 02:20 | so I'll scroll down in the listing
till I get to the Time section, and I'll
| | 02:24 | show you that the letter g, in
lower case means the 12-hour format of an hour
| | 02:29 | without leading zeroes, and the letter I
means the number of minutes with leading zeroes.
| | 02:35 | You can use whatever non-alphabetical
characters you want to format these values.
| | 02:42 | So I'm going to place my cursor back
into the code, and put in an opening paren
| | 02:46 | and then a quote, then g for
the hour, a colon and a lower
| | 02:52 | case I for the minutes.
| | 02:53 | I'll close that string with a quote, and then
I'll close the whole thing with a parenthesis.
| | 02:59 | I'll save my changes and
then click on Live View.
| | 03:02 | I'll update the copy on the testing
server and show you the current time,
| | 03:08 | which comes back as 7:06.
| | 03:10 | You won't see your actual time unless you
just happen to be in the right time zone.
| | 03:15 | It's up to you to control the current
time zone, and once again, PHP provides
| | 03:20 | a function for this.
| | 03:21 | I'll place the cursor before the
echo command and make a new line.
| | 03:25 | I'll once again type in the word
"date," and press Ctrl+Space, and then I'll
| | 03:30 | scroll down to the function,
date_default_timezone_set.
| | 03:34 | You pass a string into this function.
To find out what the available strings are
| | 03:39 | for this function, scroll down a little
ways into the documentation, and you'll
| | 03:43 | see a link for the list of supported time zones.
| | 03:46 | I'll click there, and that opens a
browser to the PHP documentation on the web.
| | 03:52 | You do need an Internet connection at
this point to see this information.
| | 03:56 | Then from there, I'll click into America,
and from there, I'll locate my particular
| | 04:01 | time zone, which I'm going
to set as America/Los_Angeles.
| | 04:03 | I'll locate that string and copy it
to the clipboard from the browser.
| | 04:10 | Then I'll return back to Dreamweaver.
| | 04:13 | I'll press Ctrl+Space, and I'll once
again go down to date_default_timezone_set,
| | 04:18 | and this time I'll press Enter.
Then I'll type in a quote and paste in my time
| | 04:23 | zone identifier, then a closing quote,
a closing parenthesis, and a semicolon.
| | 04:30 | Then after I've set the time zone but
before I output the date, I'll put in
| | 04:35 | another new line of code and echo,
and then I'll output a literal string of
| | 04:40 | The current time is:.
| | 04:42 | I'll save my changes. Then I'll click
over on the design area, and that causes
| | 04:48 | Dreamweaver to prompt me to update the
copy of my file on the testing server.
| | 04:52 | I'll click Yes, and Yes,
and there is the result.
| | 04:56 | Now I'm seeing the current time in my
time zone, or whichever time zone I've set
| | 05:01 | in the date_default_timezone_set function.
| | 05:04 | The goal of this exercise is to show you
how to use the code hinting to help you
| | 05:08 | find and insert long function names
very easily, and also how to use the code
| | 05:14 | hinting feature to get to the PHP
documentation for the particular function
| | 05:18 | you're interested in.
| | 05:20 | The goal of this feature of Dreamweaver
is to make it easier for those who like
| | 05:23 | to do a little bit of hand-coding in PHP,
to get to the features of the language
| | 05:27 | that they need and insert the code correctly.
| | Collapse this transcript |
| Understanding PHP custom classes| 00:00 | In addition to offering code hinting
for PHP language elements, Dreamweaver CS5
| | 00:06 | also gives you code hinting for custom classes.
| | 00:09 | A PHP custom class is a way
of creating reusable code.
| | 00:13 | I'll start by creating a custom class,
and then showing you how to use code
| | 00:18 | hinting to use its features.
| | 00:20 | I will be working with the version of
files in the exercise files, in a folder
| | 00:24 | named 03_managingcode > 02_hintingwithclasses.
| | 00:29 | I will start in my _includes folder.
| | 00:32 | I am going to create a custom class that
encapsulates, or contains code to output
| | 00:38 | the current time to the web site.
| | 00:39 | I will go to the _includes
folder and create a new PHP file.
| | 00:44 | I will right-click on the folder and
select new file, and I will name the new
| | 00:48 | file DateUtility.php.
| | 00:52 | When you create a file to contain a
custom class declaration, you should always
| | 00:57 | use an uppercase initial character,
such as the D in DateUtility. That's a
| | 01:02 | convention that PHP developers use.
| | 01:04 | Now I will open the file, and just as
with a Server Side Include, I will delete
| | 01:11 | any existing HTML code.
| | 01:13 | Just as with all PHP code, a PHP class
declaration must be placed within a code block,
| | 01:19 | so I will go to the Insert panel to the
PHP category, and I will add a code block.
| | 01:26 | Then, with the cursor inside the code
block, I will press Enter a few times.
| | 01:31 | Here is how you define a PHP custom class.
| | 01:35 | You start with the word "class,"
then you type in the name of the class.
| | 01:40 | By strong convention, the name of the
class matches the name of the file, but
| | 01:44 | without the .php extension.
| | 01:47 | Then you put in a pair of curly braces.
| | 01:50 | Within the class, you can define variables
or properties, and functions or methods.
| | 01:56 | I am going to define a single
function named getCurrentTime.
| | 02:00 | I will start with the word "public,"
then "function," then the name of the
| | 02:03 | function, "getCurrentTime."
| | 02:07 | After the name with the function, I
will type in a beginning and an ending
| | 02:09 | parenthesis, and then I will type
in another pair of curly braces.
| | 02:14 | The purpose of the getCurrentTime function
will be to output the current time to the browser.
| | 02:19 | I already have a little
bit of code that does that
| | 02:21 | that I created in a previous video.
| | 02:24 | In this file set, I will
find it in the phpinfo.php file.
| | 02:28 | I will open that file, and then I will
select and copy the three lines of code
| | 02:35 | that set the current time zone and
echo the current time to the browser.
| | 02:39 | I will copy that code to the
browser, then I will return to my class
| | 02:44 | declaration, I will press Enter and
then Paste. And I will select the two lines
| | 02:51 | of code that aren't properly indented,
then press Tab a couple of times to
| | 02:56 | indent them within the function.
| | 02:58 | So now this class has a public
function that I can call anytime.
| | 03:03 | I can use this class anywhere in my
web site, and I will always get the
| | 03:08 | same formatted value.
| | 03:09 | I will save the file, and then
I will open the file, footer.php.
| | 03:16 | In order to use a class
declaration, you first have to include it.
| | 03:21 | So I will place the cursor up at the
top of the file and make a couple of
| | 03:24 | lines of empty space.
| | 03:25 | Then I will go to the Insert panel,
to the PHP category, and I will add
| | 03:30 | an Include command.
| | 03:33 | And I will include the file, DateUtility.php.
| | 03:37 | If you want to include this file from a
file in another directory, you can use a
| | 03:41 | relative location, such as dots,
dot-dots and names of folders.
| | 03:46 | But because this file is in the same
folder as footer.php, I just need to
| | 03:51 | provide the file a name.
| | 03:52 | I will save the file and move
down to the bottom of the page.
| | 03:56 | I will place the cursor after the
paragraph tag with a class of phone, and I
| | 04:00 | will create another pair of paragraph tags.
| | 04:04 | I will make a little bit of empty
space. Then I will go to the Insert panel
| | 04:07 | and add a code block,
| | 04:08 | and I will make a little bit of
empty space within the code block.
| | 04:11 | I am going to create a variable
which is an instance of my custom class.
| | 04:17 | The name of the variable will be
dateutil, with the dollar sign prefix.
| | 04:22 | Then to create an instance of my
custom class, I will use this syntax:
| | 04:27 | = new, and there is my
custom class name, DateUtility.
| | 04:30 | I will press Enter to select in and
type in an opening and a closing
| | 04:36 | parenthesis and semicolon.
| | 04:38 | The dateutil variable is now an instance
of my custom class, and I can call that
| | 04:44 | custom class's functions, or methods, like this.
| | 04:47 | I will go down to the next
line, and I will type in $date.
| | 04:53 | Dreamweaver shows me the name of
the variable starting with date,
| | 04:56 | dateutil, and I will press Enter or
Return to select it. Then I am going to call
| | 05:01 | a function, which is a member of the class.
| | 05:04 | To call a member of the
class, you use this syntax:
| | 05:08 | ->. It looks like an arrow.
| | 05:11 | Dreamweaver automatically offers
the name of the function in the class,
| | 05:15 | getCurrentTime, using its
code hinting capabilities.
| | 05:18 | I will press Enter and then add a
semicolon at the end of the line.
| | 05:24 | So here are all the parts of the puzzle.
| | 05:27 | At the top of the page, I used an
Include command to include the class
| | 05:32 | declaration, and then where I want the
output to happen, I create an instance of
| | 05:38 | the class and then finally call its
function, and Dreamweaver, with its code
| | 05:43 | hinting capability, helped me
correctly name the class, and its function.
| | 05:47 | I will save the change to footer.php.
Then I will go to one of my top-level pages.
| | 05:55 | I will use index.php,
| | 05:58 | which is already including
footer.php at the bottom of the file.
| | 06:02 | I will look at the page using
Live View, updating the files on the
| | 06:08 | testing server as I go.
| | 06:09 | I will look in Design View, scroll down to the
bottom, and there is the result: the current time.
| | 06:16 | So that's a look at how you can use code
hinting to work with your own custom classes.
| | 06:21 | Custom classes give you a way of
encapsulating commonly used, or reusable code,
| | 06:27 | and Dreamweaver CS5's PHP code hinting
will help you make sure that you refer
| | 06:32 | to the class names and its properties
and functions correctly as you do your
| | 06:36 | hand coding.
| | Collapse this transcript |
| Adding Zend Framework to PHP on Windows| 00:00 | The new code hinting features in
Dreamweaver CS5 allow you to integrate
| | 00:05 | third- party, open source frameworks,
and then using site-specific code
| | 00:09 | hinting, you can configure Dreamweaver
to allow you to do code hinting on the
| | 00:13 | classes in these frameworks.
| | 00:15 | Dreamweaver is preconfigured to
work with three major frameworks.
| | 00:18 | You can get to this feature
through the menu by selecting Site >
| | 00:22 | Site-Specific Code Hints.
| | 00:25 | If you pull down the list under
Structure, you will see that there are
| | 00:28 | structures already in place for
Drupal, Joomla!, and WordPress.
| | 00:33 | I'll show you in this video how to
install another third-party library called
| | 00:37 | Zend Framework, which contains a lot of
really valuable PHP extensions, and then
| | 00:42 | I will use a few of these
extensions throughout the course.
| | 00:45 | Click Cancel to close the Site-
Specific dialog and then take a look in the
| | 00:49 | exercise files, under 03_managingcode.
| | 00:53 | If you don't have access to
the exercise files, no worries.
| | 00:56 | I will provide a web site URL in a
moment and show you where you can download it.
| | 01:01 | If you do have access to the exercise
files, locate the ZendFramework folder and
| | 01:06 | copy it to the Clipboard.
| | 01:08 | Then create a new folder on your system.
| | 01:12 | I am going to create the folder right
under my C drive and I am going to name it
| | 01:16 | phpincludes, and then I will paste
the ZendFramework folder into place.
| | 01:21 | Now if you don't have access to the
exercise files, you can download the Zend
| | 01:27 | Framework from this web page:
| | 01:30 | framework.zend.com/download.
| | 01:33 | On this page, I will click on the
Latest Zend Framework Releases link and then
| | 01:39 | this is the link that I downloaded
from, Zend Framework Minimal Package.
| | 01:44 | There are a number of different links
here, including the full package, the
| | 01:47 | minimal package which I am using,
and the Zend framework documentation.
| | 01:51 | Extract the file that you download,
copy the file to the appropriate place, and
| | 01:57 | then name your folder the same as
I have named mine, ZendFramework.
| | 02:01 | The next step is to configure your PHP
environment to use the Zend framework.
| | 02:07 | If you are working on Windows with
WampServer, go to the system tray icon for
| | 02:11 | WampServer, then go to PHP
and then load the file php.ini.
| | 02:18 | It will open in a text editor, such as Notepad.
| | 02:21 | If you are working on Mac with MAMP,
here is how you can find out which
| | 02:25 | php.ini file you are using.
| | 02:28 | Go back to Dreamweaver and then
create a file called phpinfo.php, where the
| | 02:34 | code is very simple.
| | 02:36 | It just has the simple phpinfo command.
| | 02:40 | Run the page on the server through Live
View or through an external browser and
| | 02:45 | then take a look in the resulting
output at the loaded configuration file.
| | 02:50 | This will tell you exactly which copy
of php.ini your PHP server is using, and
| | 02:56 | then once again open it in any text editor.
| | 03:00 | Now let's return to the php.ini file.
| | 03:04 | Look for a setting called include_path.
| | 03:07 | I'll press Ctrl+F - I am working in
Notepad - and I will type include_path.
| | 03:13 | If you are working on Mac in a text editor,
press Command+F and then do the same thing.
| | 03:18 | The first include_path you will
find isn't the one you are looking for;
| | 03:21 | it's in a comment section.
| | 03:23 | So search again and this time
you should find your way to the
| | 03:27 | include_path settings.
| | 03:29 | There are two, one for UNIX and one for Windows.
| | 03:33 | If you are working on Windows,
uncomment the include_path setting, and delete
| | 03:37 | the C:\php\includes, leave the
dot semicolon, and then include your
| | 03:44 | ZendFramework folder like this, C:\
phpincludes\ZendFramework\library.
| | 03:54 | You'll point to the library folder,
and then in your PHP pages, you will
| | 03:58 | explicitly include files from the
ZendFramework, starting with the folder Zend
| | 04:03 | and then walking down to
the file you want to include.
| | 04:05 | I will save that change.
| | 04:09 | If you are working on Mac with
MAMP, it will look like this.
| | 04:12 | I have a copy of the Mac version of this file
in this folder, so I'll open it in Dreamweaver.
| | 04:17 | Once again, I will search for include_
path and in the MAMP version, you will see
| | 04:22 | that the include_path is already
uncommented, and all you need to do is point it
| | 04:27 | to the appropriate folder.
| | 04:28 | You should keep the setting that's in
there - don't delete it - but on UNIX
| | 04:32 | you separate the directories from each other
with the colon character, not the semicolon.
| | 04:37 | And then after you have made all of
the changes to your php.ini files, you'll
| | 04:41 | need to restart your server.
| | 04:43 | For Windows, I will go to the WAMP
Server Admin menu, and I'll choose
| | 04:47 | Restart All Services.
| | 04:50 | If you are working with MAMP, go to
the MAMP application and once again
| | 04:54 | restart your servers.
| | 04:56 | So configuring Zend Framework is as
simple as copying the ZendFramework file
| | 05:00 | somewhere on your hard disk, and then
changing the include_path in your PHP ini file.
| | 05:06 | Once you follow those steps, you are
ready to start using the Zend Framework,
| | 05:10 | and in the following video I will
show you how to set up site-specific code
| | 05:14 | hinting, so you can easily
use the framework's classes.
| | Collapse this transcript |
| Adding Zend Framework to PHP on Mac| 00:00 | In a previous video, I described how to
install and configure the Zend Framework
| | 00:05 | into your PHP installation
on Windows using WAMP server.
| | 00:08 | In this video I'll describe how to do
the same thing on MacOS X with MAMP.
| | 00:13 | I'll assume that you're working with
MAMP in its default configuration with the
| | 00:18 | MAMP folder under Applications.
| | 00:20 | If you have access to the Exercise
Files that come with the course, you'll
| | 00:24 | find a copy of the Zend Framework in the 03
managing code folder under Exercise Files.
| | 00:29 | If you don't have access to those files,
you can download Zend Framework from
| | 00:33 | the Zend Framework website website
at framework.zend.com/download/latest.
| | 00:41 | Look for the Zend Framework minimal package.
| | 00:44 | Click the free download
link and follow the prompts.
| | 00:47 | You can place the Zend Framework
anywhere on your Mac hard disk.
| | 00:51 | I typically copy it under
the MAMP installation folder.
| | 00:55 | So I'll do that in these steps.
| | 00:57 | I have an alias to my MAMP folder here.
| | 00:59 | It's under /Applications/MAMP.
| | 01:00 | I'll go back to the 03 managing code
folder and copy the Zend Framework to
| | 01:07 | the Clipboard.
| | 01:09 | Then go to the MAMP folder and paste it in.
| | 01:13 | The next step is to include the Zend
Framework files in your PHP configuration.
| | 01:18 | You do this by modifying the PHP.ini file.
| | 01:23 | You'll need to be sure which version of PHP.
| | 01:25 | ini is being used by your PHP installation.
| | 01:29 | To do that, go to MAMP
and click Open start page.
| | 01:33 | From there click on phpInfo at the top.
| | 01:37 | The phpInfo page will show you
which PHP.ini is being used under
| | 01:42 | Loaded Configuration File.
| | 01:44 | My PHP.ini is under /
applications/MAMP/conf/PHP 5.3/PHP.ini.
| | 01:55 | I'll navigate to that folder in Finder.
| | 01:58 | I'll start at my Mac hard disk root
and go down to Applications , then MAMP,
| | 02:07 | con, PHP 5.3, and here's
the INI file I need to modify.
| | 02:14 | You can open this with any text editor.
| | 02:18 | Once you've opened PHP.ini,
search for the string include_path.
| | 02:24 | Working in Text Edit I've pressed
Command+F, typed an include_path and
| | 02:29 | then clicked Next, and I'll find that the
first instance of that string is in a comment.
| | 02:33 | I'll click Next again and this
takes me to the actual setting.
| | 02:38 | This is the default setting in
the PHP.INI file provided with MAMP.
| | 02:43 | It includes a dot, meaning the current
directory of the currently executing PHP
| | 02:47 | file, Then the paths are
separated from each other or with a colon.
| | 02:52 | In Windows, it's a semicolon.
| | 02:54 | The following path refers to an area where
you might add files in your MAMP installation.
| | 03:00 | In fact, it refers to a directory that
doesn't actually exist, but I'm going
| | 03:03 | to keep it in that string and then add the
correct path from my Zend Framework installation.
| | 03:09 | I'll place the cursor after the current
path and before the closing quote, then
| | 03:13 | put in a colon, and then the path, /
applications/MAMP/ZendFramework/library.
| | 03:25 | Make sure you type it
exactly as I'm showing here.
| | 03:28 | It is case sensitive.
| | 03:30 | Save and close your PHP.
ini file and return to MAMP.
| | 03:37 | Click the Stop Servers
button to close down your servers.
| | 03:40 | If necessary, type in your
administrator password, and then once the servers
| | 03:45 | gave shut down, click Start
Servers to start them up again.
| | 03:48 | The Zend Framework classes should
now be available to your PHP runtime
| | 03:53 | environment and as I'll show in
subsequent videos, you'll be able to include and
| | 03:57 | execute the classes where ever you
need them in your PHP-based website.
| | Collapse this transcript |
| Using the Site-Specific Code Hints feature| 00:00 | In order to show you how to
configure site-specific code hinting for a
| | 00:03 | third-party library, I'll work in this folder:
| | 00:07 | 03_managingcode > 04_sitespecific.
| | 00:11 | I will set my site root to point to that folder.
| | 00:14 | I have already installed the Zend Framework,
| | 00:17 | a third-party PHP library and
configure it so that it will work with PHP.
| | 00:21 | I am going to configure Dreamweaver so
that as I code my PHP in the editor,
| | 00:27 | I will get code hints -
| | 00:28 | that is, a list of available methods and
properties of different classes in the library.
| | 00:33 | I will go to the menu and select
Site > Site-Specific Code Hints.
| | 00:39 | The Structure list shows you that
Dreamweaver is preconfigured with code hinting
| | 00:43 | for three commonly used libraries:
| | 00:46 | Drupal, Joomla!, and WordPress.
| | 00:50 | I am going to be configuring a new
library, so I will leave the structure
| | 00:53 | setting at New from Blank. Then I
will click the Browse button, and I will
| | 00:58 | navigate to the location of
my Zend framework installation.
| | 01:03 | I am working on Windows, so
I will go to C:\phpincludes;
| | 01:08 | you should go to whichever folder you
installed the Zend Framework in. Then I'll
| | 01:12 | double-click into the Zend
framework, to the library folder.
| | 01:16 | That's as far as you should go.
| | 01:18 | Don't click into the Zend folder;
| | 01:20 | you'll select that in another step.
| | 01:23 | Click the Select button and return to
the Site-Specific Code Hints dialog.
| | 01:26 | I am going to add references to
folders that I want to scan for code hinting.
| | 01:32 | I will click the Plus button, and I will
click the Browse button, next to File/Folder.
| | 01:37 | I will double-click the Zend folder.
| | 01:40 | The Zend folder contains a number of
subfolders that contain various classes.
| | 01:45 | Although you can't see it in this
dialog, there are many PHP files in this
| | 01:50 | folder that will be
included in your application files.
| | 01:53 | I will click the Select button.
| | 01:56 | Don't check the
Recursive option for this folder.
| | 01:59 | If you do, it will take a long
time to scan the entire framework.
| | 02:03 | The purpose of including this folder
is to include the top-level PHP include
| | 02:08 | files for the different classes.
| | 02:11 | Next, click the Plus button for Extensions,
and then click into the new extension
| | 02:16 | item and type in ".php" and then click Add.
| | 02:21 | So what you have said is that you want
to scan this folder and not any of its
| | 02:26 | subfolders for all.php files, and any
classes that are found in those files
| | 02:32 | should be included for code hinting.
| | 02:35 | Next, you should include the folders
containing specific classes you want to use.
| | 02:40 | I am going to be using the Zend date class,
| | 02:43 | so I will click the Plus button, I will
browse again, I will double-click down
| | 02:48 | to Zend, and then down to the Date
folder, and then I will click Select.
| | 02:54 | This time I do want to select
Recursive. That will cause Dreamweaver to scan
| | 02:59 | through all of the subfolders of this
folder, and get all of the subclasses that
| | 03:04 | the Date class is dependent on.
| | 03:06 | Once again, I will click Plus and then
add the .php extension, and click Add.
| | 03:13 | So take a look at the selections.
| | 03:15 | The Zend folder is set without recursion,
the Date folder is set with recursion,
| | 03:20 | and they both use the .php extension.
| | 03:22 | I will click OK, and I will be
prompted to save my edits as a preset.
| | 03:27 | I will click OK again, and I will give
my new structure a name of ZendFramework.
| | 03:35 | By creating this as a preset, you will
be able to apply this code hinting preset
| | 03:40 | to other sites in the future.
| | Collapse this transcript |
| Using Zend Framework classes with code hints| 00:00 | After configuring your third-party
library, you can then use the code hints
| | 00:04 | that are implemented with Dreamweaver to more
easily and accurately do your PHP hand coding.
| | 00:10 | For this demonstration, I'll use
a version of my site in the folder
| | 00:14 | 03_managingcode/05_sitecodehints,
and I'll point my site to that folder.
| | 00:22 | When you configure site code hinting,
a file is added to your site, named
| | 00:27 | dw_php_codehinting.config.
| | 00:31 | You can open this file in Dreamweaver,
and you'll see that it's a simple text
| | 00:35 | file that includes listings pointing
to the absolute folder locations that
| | 00:40 | contain your third-party files.
| | 00:42 | If you're working on Mac OS X with MAMP
and you placed the Zend Framework in the
| | 00:47 | location I recommended, under the MAMP
installation folder, in this file, you
| | 00:52 | can change every instance of
c:/phpincludes to /applications/MAMP.
| | 00:59 | There is more information
stored in the background;
| | 01:01 | this file wasn't the whole story.
But this is how you can tell that your
| | 01:05 | particular code hinting
setup has been added to the site.
| | 01:09 | I'll demonstrate using code hinting
by using your class named Zend_Date.
| | 01:14 | The Zend_Date class is a PHP class that does
a lot more than the standard PHP date class.
| | 01:21 | I'll be adding the code in a
file called DateUtility.php.
| | 01:26 | This file is being included and used
in a file called footer.php already.
| | 01:31 | In the current version of the file, I'm
setting the time zone and using the PHP
| | 01:36 | date function to output
the time in the current format.
| | 01:40 | I'm going to add the use
of the Zend_Date class here.
| | 01:43 | The first step, before you can use any
of the features of any PHP class, is to
| | 01:48 | include the file that defines the class.
| | 01:51 | You typically do this with a
PHP command called include_once.
| | 01:56 | I'll place the cursor at the line that
has the class declaration and then create
| | 02:00 | an empty line above it.
| | 02:02 | Then I'll type in include_once, and
then after an opening parenthesis, I'll add
| | 02:08 | the relative location of the
date class I'm interested in.
| | 02:11 | I've already configured my PHP
installation to automatically include anything in
| | 02:16 | the Zend framework library.
| | 02:18 | So all I need to de here is start off
with the Zend folder, and then after a
| | 02:23 | forward slash, name the class
that I want to include, Date.php.
| | 02:30 | If you're not sure of the names of the
PHP files, take a look at the phpincludes
| | 02:35 | folder, at the ZendFramework
library folder, and then go to Zend.
| | 02:41 | Down at the bottom, you'll see a whole
listing of all the files that should be included.
| | 02:46 | I'm including this one, Date.php.
| | 02:50 | This file in turn includes all of the
classes that are required: the DateObject,
| | 02:56 | Locale, Format, and Math.
| | 02:59 | It's up to the Zend framework to go and
get all the resources it needs for all
| | 03:03 | of the complex features that are implemented.
| | 03:06 | I'll close these windows
and return to Dreamweaver.
| | 03:09 | So I've included the definition of the
date class. Now, I can use it in my PHP code.
| | 03:15 | I'll place the cursor inside the
getCurrentTime function and press Enter to
| | 03:20 | create a new line, and next, I'll
create an instance of the Zend_Date class.
| | 03:26 | I'll create a variable named zendDate -
| | 03:29 | you can name this variable anything you
want - and then I'll use the new keyword
| | 03:34 | and then type the beginning of the class name.
| | 03:37 | All classes in the ZendFramework
library start off with the word "Zend."
| | 03:41 | So I'll type in "Zend" and an underscore,
and then I can scroll down and select
| | 03:46 | the class that I want.
| | 03:48 | I'm going to use Zend_Date.
| | 03:50 | I'll type in an opening parenthesis,
and I'm showing that there are three
| | 03:55 | possible arguments, or values I can pass in:
| | 03:58 | date, part, and locale.
| | 04:00 | I'm going to ignore those properties
for the purpose of this exercise, and
| | 04:04 | not pass in any values.
| | 04:07 | When you create a new instance of the
Zend_Date class without passing in any
| | 04:10 | properties, it represents the
current date and time on the server.
| | 04:15 | So, now I have a copy of the
class, and I can call its functions.
| | 04:20 | I'll place the cursor down toward the
bottom of the function, after the last
| | 04:24 | echo command, and I'm going to add a couple of
echo commands that output some literal text.
| | 04:29 | The first one will add a <br> tag.
| | 04:32 | Make sure that you include
semicolons at the end of every line.
| | 04:35 | The next echo command will output some
literal text: The current date is, and
| | 04:42 | then I'm ready to use a
feature of the Zend_Date class.
| | 04:47 | Once again, I'll use the echo
command, and then I'll use zendDate -
| | 04:52 | that's the name of my variable - and
then put in the dash greater than, and I'll
| | 04:57 | see a whole listing of all the
features of the Zend_Date class.
| | 05:01 | You'll see that there is an
enormous set of methods that you can use to
| | 05:05 | manipulate and inspect various date values.
| | 05:08 | First, I'm going to use the get method.
| | 05:11 | The get method allows you to output
the raw value of the zendDate object.
| | 05:17 | I'll save the change, and then I'll
open the file that's using my date
| | 05:21 | utility class, footer.php.
| | 05:24 | I'll look at this file in Live View,
making sure that I update the server, and
| | 05:30 | then I'll scroll down in the Live View
and show that the current date is being
| | 05:35 | output as a raw numeric value.
| | 05:38 | This is the number of milliseconds from
what's called the epoch date of the date object.
| | 05:43 | Well, that's not exactly
what I want to show the user.
| | 05:46 | Instead I'd like to show
them a friendly date output.
| | 05:50 | So I'll exit Live View and go
back to my code, and I'll go back
| | 05:54 | to DateUtility.php.
| | 05:58 | Instead of using the get method, I'm
going to use another method called toString.
| | 06:03 | The toString method, once again,
can take a few different arguments:
| | 06:06 | a format, a type, and a locale.
| | 06:08 | I'm going to use a format this time of
MMMM and a space, then a lowercase d, a
| | 06:16 | comma and a space, and four Ys.
| | 06:20 | These are masking values that mean the
full name of the month, the date as a
| | 06:24 | numeric value without
padding, and a four-digit year.
| | 06:29 | I'll save those changes and then go
back to footer.php and look at the files
| | 06:34 | in Live View, copying them to the server, and
here is the result of using the Zend_Date class;
| | 06:40 | I'm now getting a nicely formatted date.
| | 06:42 | You'll find that the utility classes
in the Zend framework are much more
| | 06:46 | powerful than their raw
equivalents in the PHP core libraries.
| | 06:51 | Many developers like using the Zend
framework only for these utility classes,
| | 06:56 | while other developers like to use the
entire capability of the Zend framework,
| | 07:00 | which allows you to build complex,
well-architected applications, using an
| | 07:05 | application architecture known
as Model-View-Controller, or MVC.
| | 07:10 | However you use the Zend framework,
Dreamweaver CS5, through its site-specific
| | 07:15 | code hinting, will help you get your code
right the first time, both for the Zend
| | 07:20 | framework and for any other third-
party PHP libraries you decide to use.
| | Collapse this transcript |
| Managing reusable code with the Snippets panel| 00:00 | Dreamweaver CS5 offers another feature
for managing your code, where you want to
| | 00:05 | use the code over and over again.
| | 00:07 | It's called the Snippets panel, and it's
been a part of Dreamweaver for quite a while.
| | 00:12 | For this exercise, I'll use the
version of my site in the folder
| | 00:15 | 03_managingcode\06_snippets.
| | 00:20 | The Snippets folder is located in the
same panel group as the Files panel.
| | 00:25 | It's populated with some default
snippets, including commenting, footers, form
| | 00:31 | elements, and many others, but you
can add your own snippets quite easily.
| | 00:38 | For this exercise, I'll start with
the file footer.php that's in the
| | 00:42 | _includes folder of my site.
| | 00:43 | I'll look at the file in Code View in
fullscreen and scroll down to the dateutil section.
| | 00:51 | I'm going to take a few elements of
this php code and make them into a
| | 00:55 | reusable code snippet.
| | 00:57 | I'll start with the PHP Include
command up at the top. I'm going to move the
| | 01:01 | code around a little bit to get the
code ready to use in a code snippet, but I
| | 01:06 | won't save the changes to this file;
| | 01:08 | I'm only going to use it as a resource.
| | 01:12 | I'll first select the include command
from the first php code block, and I'll
| | 01:17 | copy it to the clipboard.
| | 01:19 | Then I'll go down to the other php
code that's calling the DateUtility class.
| | 01:24 | I'll place the cursor within the php
code block and press Enter, and then paste
| | 01:30 | in the Include command.
| | 01:32 | Then I'm going to change
the indenting of this code.
| | 01:36 | I'll select the entire code block and
then press Shift+Tab until all of the code
| | 01:42 | is aligned left in the page.
| | 01:45 | The purpose is just to strip out all
the tabs before I create the snippet.
| | 01:50 | I'll leave the code selected, and
I press F4 to show my panels again.
| | 01:56 | Then I'll go to the Snippets panel.
| | 01:58 | Within the Snippets panel, you can
add a new snippet to any of the existing
| | 02:02 | folders, or you can create your own folder.
| | 02:06 | I'll right-click in the panel, but not
on any of the folder icons, and choose New
| | 02:10 | Folder, and I'll name my new folder PHP.
| | 02:13 | Then I'll right-click
again and choose New Snippet.
| | 02:18 | The code that I'd already selected in
the editor area is automatically copied
| | 02:23 | into the snippet dialog.
| | 02:25 | You can also manually
copy and paste, if you like.
| | 02:28 | I'll name my new snippet Get Current Time.
| | 02:32 | You can select your
snippets to one of two types.
| | 02:35 | If you choose Wrap selection, you'll be
inserting code before and after selected code.
| | 02:42 | If you choose Insert block, that means you're
inserting all of the code as a single block.
| | 02:47 | That's the type that I want to use.
| | 02:49 | In the Description, you can
type in anything you want.
| | 02:52 | I'll type in, "Use my custom
DateUtility class" and click OK.
| | 03:01 | Anytime you want to use that code, you'll
have it available in your Snippets folder.
| | 03:06 | I'll go back to footer.php, I'll go back
to the top of the page, and I'll remove
| | 03:12 | the php code block at the top, and
I'll go down to the bottom and remove that
| | 03:17 | php code block as well.
| | 03:19 | Now, in the future, if I want to use
the snippet, all I have to do is make a
| | 03:23 | little bit of space, then go to the
Snippets panel and then double-click the
| | 03:28 | snippet, or drag it where I want it to go.
| | 03:31 | The Snippets panel allows you to build
up a collection of common php code or
| | 03:36 | HTML or JavaScript code, whatever you like.
| | 03:39 | Unlike the site-specific code hints,
which is site-specific, the Snippets panel
| | 03:44 | saves your content for all of your sites.
| | 03:47 | So if you come up with a good bit of
code that works on one site and you want to
| | 03:51 | be able to easily use it on another
site, store it in the Snippets panel.
| | 03:55 | Later on, you'll be able to use
that code wherever you need it.
| | Collapse this transcript |
|
|
4. Creating a DatabaseUnderstanding relational databases| 00:00 | MySQL is an example of a
relational database engine.
| | 00:05 | It manages data in multiple tables and
columns, and gives you the ability to
| | 00:09 | join these tables together
at runtime in SQL statements.
| | 00:14 | It's important to understand a few
basics about the nature of databases.
| | 00:19 | Data is stored in tables.
| | 00:21 | In this example, data is stored for a
library in a number of tables, including
| | 00:26 | Authors, Books, Customers, and Checkouts.
| | 00:30 | Each of the tables manages
data for a particular entity.
| | 00:33 | For example, the Authors table
manages data for each author.
| | 00:38 | You define the table with multiple columns.
| | 00:41 | Columns, also known as fields,
represent the individual elements of data in
| | 00:45 | a particular entity.
| | 00:46 | When you design your tables, it's
very important to include a single column,
| | 00:51 | known as the primary key.
| | 00:53 | In this table, the authorId is the primary key.
| | 00:56 | The asterisk indicates this.
| | 00:59 | Then each of the other columns
represents a particular bit of data.
| | 01:02 | For example, an author might have the
firstName, the lastName, and the dateOfBirth.
| | 01:08 | The authorId in MySQL is commonly set
up as an integer, or numeric value, which
| | 01:13 | means that when you add a new record
to the table, MySQL assigns the next
| | 01:18 | available number for the primary key column.
| | 01:20 | You should design your web sites so
that the user never sees this primary key
| | 01:24 | explicitly on the screen.
| | 01:26 | It's a meaningless value, so that the
user doesn't have to enter the value or
| | 01:30 | take any responsibility for it.
| | 01:32 | It's completely managed by your web site,
by your PHP code, and by your MySQL database.
| | 01:39 | A well-designed relational database
structure is said to be normalized.
| | 01:44 | That means that you don't repeat data,
but instead break it up into different
| | 01:47 | tables, so it can easily be
joined together as needed at runtime.
| | 01:52 | As mentioned previously, each
table should have a primary key.
| | 01:56 | The value for each row in the primary
key column uniquely identifies that row,
| | 02:01 | so that if you have a row, say, with a
value of 5 in the primary key, there will
| | 02:05 | be no other row with that value.
| | 02:08 | This makes it possible to select
data from the table very easily.
| | 02:12 | Most tables have single column primary keys.
| | 02:15 | For example, an author's table would
have an authorId, a book's table would have
| | 02:20 | a bookId, and so on.
| | 02:22 | You don't have to use that naming
convention, but it's the one I typically use.
| | 02:26 | There are also sometimes tables with
multiple column primary keys, where two or
| | 02:31 | more values together make up a unique value.
| | 02:35 | I won't use any of those tables in the
sample database for this video series,
| | 02:39 | but you will see them occur in
more complex database structures.
| | 02:43 | In order to join tables together,
you can add foreign key columns.
| | 02:48 | A foreign key column in one table would
match the primary key column in another table.
| | 02:53 | That would allow you to
join them together as needed.
| | 02:56 | Here is a way to visualize the
relationship between two tables.
| | 03:00 | You create the relationships between
primary keys in one table and a foreign
| | 03:05 | key in another table.
| | 03:07 | In this table, there are four columns
named bookId, title, authorId, and isbncode.
| | 03:14 | The asterisk indicates that bookId
is the primary key for this table.
| | 03:19 | authorId is also a numeric value,
but it's not unique in this table;
| | 03:24 | instead, it's designed to
join this table to another table.
| | 03:28 | This table would be the Authors table.
| | 03:31 | It would also have four columns
perhaps, with column names of authorId,
| | 03:36 | firstName, lastName, and dateOfBirth.
| | 03:38 | This table's primary key is
authorId, indicated by the asterisk.
| | 03:43 | Assuming that there are values in the
two tables, Books and Authors that match
| | 03:47 | each other, you would join them
together at runtime by matching the values in
| | 03:51 | the authorId columns of both tables.
| | 03:55 | You would do this with an SQL statement.
| | 03:58 | This is one available syntax
for joining tables together.
| | 04:01 | The SELECT clause indicates which
columns from each table are going to be
| | 04:05 | included in the recordset
returned from the database.
| | 04:08 | The FROM clause uses a JOIN
operator to link the two tables together.
| | 04:14 | The ON clause indicates which
columns should match each other.
| | 04:18 | The operator JOIN means
what we call an inner join.
| | 04:22 | That means that values will only be returned
where there are matches between the two tables.
| | 04:28 | You can also use outer joins, indicated
by the phrases LEFT JOIN or RIGHT JOIN.
| | 04:33 | That means that you're including data
from one table regardless of whether there
| | 04:37 | is a match is in the other table.
| | 04:39 | Again, for the sake of simplicity, in
this video series, I'll only use inner
| | 04:43 | joins indicated by the JOIN operator.
| | 04:46 | So this SQL statement will return four columns,
| | 04:49 | the title and isbncode from the Books
table, and the firstName and lastName
| | 04:54 | from the Authors table.
| | 04:56 | These values will be returned in a
single recordset, and only where there would
| | 05:00 | be matches between the
authorId values in both tables.
| | 05:04 | There is a lot more to know about
relational databases, and normalizing your
| | 05:08 | database structures,
| | 05:10 | but if you understand these simple
principles, you'll be able to follow all of
| | 05:14 | the exercises in this video series, and
| | 05:17 | you'll be able to accomplish about
80-90% of what we commonly do in dynamic web
| | 05:22 | applications built with PHP and MySQL.
| | Collapse this transcript |
| Creating a MySQL database in phpMyAdmin| 00:00 | Throughout the remainder of this video
series, I'm going to be using a database
| | 00:04 | that's built and stored in
the MySQL database engine.
| | 00:08 | I'll show you how to define a
database from scratch first in phpMyAdmin,
| | 00:13 | a web-based application that's included with
both WAMP server on Windows and MAMP on Mac.
| | 00:19 | Then in another video, I'll show you how to
import an existing database from a script.
| | 00:25 | To start up phpMyAdmin on Windows, go to the
system tray icon, and then go to phpMyAdmin.
| | 00:32 | If you're working on MAMP with Mac, go to the
MAMP homepage, and then click on phpMyAdmin.
| | 00:39 | On the phpMyAdmin homepage, click into
Create new database, and then type in the
| | 00:45 | name of the database you want to create.
| | 00:47 | Your database name should
not have any spaces in it.
| | 00:51 | If you want to represent a space,
use an underscore character,
| | 00:54 | type the name of the database, and click Create.
| | 00:58 | You're taken to a screen to create tables.
| | 01:02 | You can have as many tables
as you want in your database.
| | 01:05 | Each table can have as many
fields or columns as you need.
| | 01:08 | In this initial database, I'm
only going to have one table.
| | 01:12 | It'll be named people.
| | 01:14 | Set the initial number of fields.
| | 01:16 | If you don't get this
exactly right, it's no problem.
| | 01:19 | You'll be able to add fields later on.
| | 01:22 | I'll set my initial number
of fields to 3, and click Go.
| | 01:27 | On this screen, you're asked to define
the fields or columns in your database.
| | 01:32 | The first field should always be a primary key.
| | 01:35 | I typically set the name of this
column with the name of the entity that's
| | 01:39 | being stored in the table, such as
person for the people table, and then I
| | 01:44 | append Id to the end of it.
| | 01:46 | So the name of my primary
key column will be personId.
| | 01:51 | In MySQL databases, it's very common
to set the primary key column as an
| | 01:56 | integer, and then to add
the AUTO INCREMENT property.
| | 01:59 | That means that each time a new row or
record is added to the table, the next
| | 02:04 | available numeric value will be
assigned to the table automatically.
| | 02:08 | I first have to say that this is a primary key.
| | 02:12 | You do that by setting the
Index property to PRIMARY.
| | 02:16 | Then I'll check the AUTO INCREMENT property.
| | 02:18 | The other two columns will be
named firstName and lastName.
| | 02:23 | They'll both be set to
variable character, or VARCHAR columns.
| | 02:28 | VARCHAR columns can take text values.
| | 02:31 | I'll set them each to VARCHAR.
| | 02:35 | Then I'll set the available length
for the columns to 50 characters each.
| | 02:39 | That means that that's the longest
available value that you can put into the field.
| | 02:45 | Finally, I'll set the
Storage Engine for this table.
| | 02:48 | The Storage Engine indicates how the
table will be physically stored on disk,
| | 02:53 | and also what its capabilities will be.
| | 02:55 | The default is a storage engine named MyISAM.
| | 02:57 | MyISAM is an incredibly fast
storage engine. It's the default.
| | 03:05 | When you set a table up as MyISAM,
you don't get transactional capability -
| | 03:09 | I'll give you an explanation of what
that means in a moment - but you do get very
| | 03:13 | fast storage and retrieval.
| | 03:16 | If you need transactional capability,
meaning the ability to commit and roll back
| | 03:20 | transactions, you can
instead select the InnoDB engine.
| | 03:25 | As with other settings, if you don't
set this exactly the way you want it
| | 03:28 | initially, you can change it later.
| | 03:31 | I'll accept the default of MyIASM.
| | 03:34 | Then, down at the bottom of the screen, I
can click Save, or if I click Go, I can
| | 03:39 | add additional fields or columns.
| | 03:41 | I'll click Save, and that creates my table.
| | 03:45 | On this screen, you're shown the actual
SQL code that was used to create the table.
| | 03:51 | Also in the table structure, you can see
what the columns are, their data types,
| | 03:56 | and their properties.
| | 03:57 | If you need to edit any of these
columns, you can click on the Edit icon,
| | 04:01 | represented by a pencil, and
| | 04:03 | you'll be taken to this data entry form.
| | 04:06 | If you click Save, you'll see the resulting
SQL statement that was used to make the change.
| | 04:11 | If you need to add fields, you
can use the form down in the middle.
| | 04:15 | You can add fields to the end of the
table, or after any of the existing fields.
| | 04:19 | If you need to completely drop the table,
or delete it, you can click the Drop icon.
| | 04:25 | Be careful with this.
| | 04:26 | If you drop a table or a
database, there is no backup.
| | 04:30 | You'll need to create it from scratch later.
| | 04:33 | Once you've created the table structure,
you're ready to add data to the table.
| | 04:38 | I'll show you how to do
that in a separate video.
| | Collapse this transcript |
| Adding data in phpMyAdmin| 00:00 | Once you've defined a database
structure, you can add data to the
| | 00:04 | database through phpMyAdmin.
| | 00:06 | For this demonstration, I'll use the
database structure that I've already
| | 00:09 | created in a previous video.
| | 00:11 | The name of the database is mydatabase.
| | 00:15 | From the homepage of phpMyAdmin,
I'll click into the database.
| | 00:19 | The database has a single table, named people.
| | 00:22 | Some of the icons will be disabled.
| | 00:25 | The Browse and Search icons are both
disabled currently, because the table
| | 00:29 | doesn't have any data.
| | 00:31 | To insert some data, click the Insert
link, the fourth icon from the left.
| | 00:37 | You're taken to a screen where
you can insert multiple rows.
| | 00:41 | I'm going to add data for the
firstName and lastName columns.
| | 00:46 | I won't add data for the Id column,
because that's an auto incrementing primary key.
| | 00:51 | I'll click into the firstName, and type a
value of Davey, and the lastName will be Jones.
| | 00:57 | Then I can click Go immediately, or I
can click down into fields in the second
| | 01:02 | data entry form and insert multiple rows.
| | 01:06 | For the second row, I'll set
the values as Melissa, Smith.
| | 01:11 | Notice that as I type values into
these fields, the Ignore check box was
| | 01:15 | automatically deselected.
| | 01:18 | To insert both rows at the
same time, click the Go button.
| | 01:22 | By default, you'll Go back to the previous page.
| | 01:25 | But if you have more data to enter, you
can instead choose Insert another new row.
| | 01:31 | I'll leave these settings at
the defaults and click Go.
| | 01:35 | The resulting SQL statement that adds
the data to the database is listed here.
| | 01:40 | I can browse the table by clicking
the Browse icon in the Action column.
| | 01:44 | I'll see that my data was
successfully added to the table.
| | 01:47 | The auto incrementing primary key
column personId has values of 1 and 2, the
| | 01:53 | next available values when I inserted the data.
| | 01:56 | The nature of a primary key column is
that its data should uniquely identify
| | 02:01 | each row, and should be meaningless,
meaning that the user shouldn't care about
| | 02:05 | what the primary key is.
| | 02:07 | So you can add as much data to your
MySQL database tables as you need to
| | 02:11 | through phpMyAdmin.
| | 02:13 | If you want to edit the table, you can
go back to the Table link, which you'll
| | 02:17 | find up at the top of the screen.
| | 02:20 | From there, you can edit, or you can
delete individual records, or you can
| | 02:24 | select multiple records, and
edit or delete them from there.
| | 02:28 | I'm not going to use this particular
database and database table in the rest of
| | 02:32 | the video series for the exercises;
| | 02:35 | instead, I'll be using a database
table that's defined in an SQL Script.
| | 02:40 | I'll show you how to import that
script through phpMyAdmin in the next video.
| | Collapse this transcript |
| Importing a completed database from a script| 00:00 | In the exercises in the remainder of
this video series, I am going to use a
| | 00:04 | database that I have
defined in an SQL script file.
| | 00:08 | If you don't have access to the
exercise files, you can find a copy of this
| | 00:12 | database script in the free exercise
files available on the lynda.com web site
| | 00:17 | with this video series.
| | 00:19 | If you have access to the exercise files,
you'll be able to import the database
| | 00:23 | quickly and easily in phpMyAdmin.
| | 00:26 | You'll find the SQL file in the
04_createdatabase folder, under Exercise Files.
| | 00:32 | It's named explorecalifornia.sql.
| | 00:36 | You can open this up in any text editor.
| | 00:38 | I am using TextPad on Windows.
| | 00:41 | I am first going to walk through the
database structure and show you how the
| | 00:45 | database is defined.
| | 00:46 | In the top of the SQL file, there are
some comments that indicate the character
| | 00:51 | set, connection, and names.
| | 00:55 | Then the table structures and data are added.
| | 00:58 | For each table there is a DROP TABLE
command and then a CREATE TABLE command.
| | 01:04 | This allows you to run the script, and
it will wipe out any existing versions of
| | 01:08 | the database tables and
then create the new ones.
| | 01:12 | The first table is named admin.
| | 01:14 | It has three columns, called adminId -
the primary key - userName and password.
| | 01:20 | userName and password are
both variable character columns.
| | 01:24 | The primary key is adminId, the
engine for the table is MyISAM, and then the
| | 01:30 | character set and AUTO_
INCREMENT properties were set.
| | 01:34 | The AUTO_INCREMENT is always set to the
next available numeric value for the table.
| | 01:39 | There is one Insert statement
that adds a single row to the table.
| | 01:42 | The primary key is set to a value of 1, and
so the next available primary key would be 2.
| | 01:49 | So that's the admin table.
| | 01:51 | I'll be using that in exercises
about authenticating users on databases.
| | 01:56 | The next table is named explorers.
| | 01:58 | Once again, it has a Primary Key column.
| | 02:01 | This time it's named explorerId.
| | 02:02 | Then it has a whole series of columns,
such as firstName, lastName, and so on.
| | 02:08 | Most of these are variable
character or text columns.
| | 02:12 | There is one column though, named dob, for
date of birth, that's set as a date column.
| | 02:18 | There are three existing records in the
explorers table with primary key values
| | 02:22 | of 1, 2 and 3, and so the
AUTO_INCREMENT is set to 4.
| | 02:27 | The next table is named
packages and refers to tour packages.
| | 02:32 | It has a primary key named packageId
and three variable character columns.
| | 02:37 | And then there are 9 records names
Backpack Cal, California Calm, and so on.
| | 02:44 | If you are setting up this database
from scratch, you can add any values you
| | 02:47 | want into these columns.
| | 02:49 | The next column is named states, and
it's a list of the states of the union.
| | 02:54 | It has two columns, named stateId and stateName.
| | 02:58 | The first column is set as the primary
key, but in this case there is not an
| | 03:02 | AUTO_INCREMENT column
because it's a text-based column.
| | 03:07 | With the states table, the first
value in the each row is the two-character
| | 03:11 | abbreviation for the state, and the
second column is the name of the state.
| | 03:15 | There are 51 records in this table,
including 50 for the states themselves and
| | 03:21 | one record for the District of Columbia.
| | 03:23 | I'll be using this table in an
exercise about data entry forms, and I'll show
| | 03:27 | you how to take the data from this
table and display it in a pulldown list that
| | 03:32 | lets the user select a state.
| | 03:33 | I'll scroll down a bit to the
next table, which is named tours.
| | 03:39 | The tours table has a primary key of
tourId and a packageId, which is a foreign key.
| | 03:46 | This column, packageId, lets you relate
the table to the packages table, using a
| | 03:51 | primary key-foreign key relationship.
| | 03:53 | Most of the other columns in this table
are variable character or text columns,
| | 03:58 | but there is one column named price
which is set with a data type of double.
| | 04:02 | A double is a numeric value
that allows fractional values.
| | 04:06 | The double type is very commonly used
in MySQL to represent currency values.
| | 04:11 | There is another column that's not text-based.
| | 04:13 | It's called length, and it's in integer value.
| | 04:16 | This is the number of days for each
tour. And then there were 20 something
| | 04:20 | records that are provided for that table.
| | 04:22 | So that's a look at the database structure.
| | 04:25 | I'll show you how to import it.
| | 04:27 | I'll go to phpMyAdmin.
| | 04:34 | Before I can run the script, I need to
create a new database, so I'll click
| | 04:38 | into the Create new database field and type
in "explorecalifornia" and then click Create.
| | 04:48 | Once I've created the
database, I can import the script.
| | 04:52 | I'll click the Import button at the top.
Then I'll Browse and select the SQL
| | 04:57 | file from the 04_
createdatabase folder of the exercise files.
| | 05:05 | After selecting the file, I'll
click Go, in the lower-right corner.
| | 05:10 | It takes only a second or two to
execute the script and create the
| | 05:13 | database structure and data.
| | 05:15 | I'll click into the first table admin,
and show you that there is one row, with
| | 05:20 | a userName of explorerone
and a password of password.
| | 05:24 | I'll click into packages and
show you that there are 9 records,
| | 05:28 | states, and show you that there are
many records for the various states,
| | 05:32 | and tours.
| | Collapse this transcript |
|
|
5. Using Bindings and Server BehaviorsDefining a Dreamweaver database connection| 00:00 | In this chapter of the video series,
I am going to describe features of
| | 00:04 | Dreamweaver CS5 that allow you to
easily connect to a MySQL database and
| | 00:09 | retrieve and display data
with generated PHP code.
| | 00:13 | I'll be working in a version of this
site in the exercise files, and if you have
| | 00:17 | access to the exercise
files, you can follow along.
| | 00:20 | I'll go to the menu and
choose Site > Manage Sites.
| | 00:24 | I'll Edit my site, and then I'll
set my local site folder to the folder
| | 00:30 | 05_bindingandbehaviors, under the exercise files.
| | 00:34 | In previous chapters, I switched
to a new site for each exercise.
| | 00:39 | In this chapter, all of the exercises
will be done in a single set of files,
| | 00:44 | but I'll use a new file for each
exercise, so I'll only need to change the site
| | 00:48 | once for the entire chapter.
| | 00:51 | I'll click Select and then click Save,
and then click Done, and if you see any
| | 00:56 | other messages along the
way, click OK to clear them.
| | 00:59 | The first step in connecting
to your database is to define a
| | 01:03 | database connection.
| | 01:04 | You do this through the Databases panel.
| | 01:07 | You can get to this panel through the
menu, by selecting Window > Databases, or
| | 01:12 | you can press the associated keyboard
shortcut, or if you already have the panel
| | 01:16 | in your workspace, you can go to it directly.
| | 01:18 | I am working in the App Developer Plus
workspace, and the Databases panel is
| | 01:24 | docked in the right section.
| | 01:26 | I'll open the Databases panel
and then click the Plus button.
| | 01:30 | If the Databases panel is disabled,
check to make sure that you have a PHP file
| | 01:35 | open and that Live View is turned off.
| | 01:39 | When you're working with PHP in
Dreamweaver CS5, you're only allowed to
| | 01:43 | connect to MySQL databases.
| | 01:45 | So I'll choose the only
available item, MySQL Connection.
| | 01:49 | You can set the Connection
name to anything you like.
| | 01:52 | I typically set it to the
same as the database name itself.
| | 01:56 | So I'll set my Connection
name as explorecalifornia.
| | 02:01 | The MySQL server entry should be pointed
at the location of your database server.
| | 02:05 | I am working with a copy of MySQL on my
local system, so I'll type in "localhost."
| | 02:11 | If you're working with a copy of the
database that's on another machine, you can
| | 02:15 | provide either the DNS name or the IP address.
| | 02:19 | Next I'll select a User name.
| | 02:22 | When you install WAMP server or MAMP,
the default administrative username is
| | 02:27 | root, and that's what I'll use.
| | 02:29 | In a production environment,
you'll have a unique username.
| | 02:33 | The password will differ depending on
whether you are working in MAMP on Mac or
| | 02:36 | on WAMP server on Windows.
| | 02:39 | If you're working on Mac OS X with MAMP
type in the word "root," again, in all
| | 02:43 | lowercase. If you're working on WAMP
server on Windows, leave the password blank.
| | 02:50 | Now click the Select button.
| | 02:52 | You should see a list of the
available databases in your database server.
| | 02:57 | Depending on whether you're working on MAMP or
WAMP server, you'll see either 4 or 5 databases.
| | 03:03 | Choose explorecalifornia
and click OK. Then click Test.
| | 03:08 | This step verifies that
Dreamweaver can connect to your database.
| | 03:12 | If you're working on a WAMP server
with a blank password, you'll see
| | 03:16 | this warning dialog.
| | 03:17 | If you are working on MAMP, you won't.
| | 03:20 | If you see this warning dialog,
click OK and then click Test again.
| | 03:25 | And now, regardless of whether you're
working on Mac or Windows, you should see
| | 03:29 | the dialog, Connection was made successfully.
| | 03:32 | Click OK and then click OK again.
| | 03:35 | If you have any trouble with this part
of the process, make sure that you can
| | 03:39 | open phpMyAdmin and see the
database from there, and then come back to
| | 03:43 | Dreamweaver and try
creating the connection again.
| | 03:46 | When you define the connection, a file
is automatically created in your site.
| | 03:52 | It's placed in a folder named Connections,
which you'll now find in your Files panel.
| | 03:57 | If you don't see the Connections
folder, click the Refresh button in the
| | 04:00 | Files panel's toolbar.
| | 04:03 | Once you see the Connections folder,
open it up, and you should see a file named
| | 04:07 | explorecalifornia.php.
| | 04:10 | Double-click on the icon next to the
file name to open it, and then if it opens
| | 04:15 | up in Design View, switch to Code View.
| | 04:18 | This file works by setting a number of
variables and then using a PHP function
| | 04:22 | called mysql_pconnect.
| | 04:25 | Those variables are passed
in to create the connection.
| | 04:28 | The variable explorecalifornia
represents the connection itself, and it will be
| | 04:33 | used in any PHP pages throughout your
web site, to connect to the database in
| | 04:38 | order to retrieve or update data.
| | 04:40 | The four variables are the hostname,
which is set to localhost, the database
| | 04:45 | explorecalifornia, the username root
and the password, which will either be a
| | 04:50 | blank value for Windows
or the word "root" for Mac.
| | 04:54 | To change the connection definitions,
you can either edit this file directly, or
| | 04:59 | if you prefer, you can go back to the
Databases panel and double-click on the
| | 05:03 | database, and that will
reopen the MySQL Connection dialog.
| | 05:08 | You can make changes here and click OK,
and the connection file will be recreated.
| | 05:13 | So that's a look at how to
define your database connection.
| | 05:16 | You go through the Databases panel,
provide all of the required parameters,
| | 05:21 | and the resulting file is stored in the
Connections folder, which is stored in
| | 05:25 | the site root.
| | Collapse this transcript |
| Building a simple recordset | 00:00 | Once you have defined a database
connection, you're ready to retrieve data from
| | 00:04 | your MySQL database.
| | 00:06 | Dreamweaver makes it easy to build
simple SQL statements to do this work for you.
| | 00:11 | SQL stands for Structured Query Language,
and it's the standard that's used to
| | 00:16 | communicate with the database
from any application environment.
| | 00:20 | To get started with SQL, open any PHP file.
| | 00:23 | I am working with the file simplers.php, which
you'll find in the root folder of this site.
| | 00:30 | In the Bindings panel, there is a
Plus button that lets you create what
| | 00:34 | Dreamweaver refers to as a binding.
| | 00:36 | A binding is a definition of dynamic data.
| | 00:40 | I'll click the Plus button
and choose Recordset (Query).
| | 00:45 | The Recordset dialog box has two modes:
| | 00:48 | Simple and Advanced.
| | 00:50 | If this is the first time you've used
this dialog, you'll see the Simple version.
| | 00:54 | You enter the name of the recordset,
select a connection, choose a table in that
| | 01:00 | database, and then supply other parameters.
| | 01:04 | There is a button labeled Advanced, and
when you click that, you're taken to the
| | 01:08 | Advanced version of the Recordset dialog.
| | 01:10 | I am going to start with the Simple version.
| | 01:13 | You can name your recordset anything you want.
| | 01:16 | I typically prefix my record sets
with the characters rs, so I am going to
| | 01:20 | name this rsPackages.
| | 01:23 | Then I'll pull down the Table
list and choose the packages table.
| | 01:27 | You'll see a listing of the
available columns in the table.
| | 01:31 | If you'll leave the Columns selection
set to All, that means you're retrieving
| | 01:35 | all of the columns in the entire table.
| | 01:38 | If you prefer, you can choose the
Selected radio button, and then holding
| | 01:42 | down the Ctrl key on Windows or the Command
key on Mac, you can click on the columns you want.
| | 01:48 | I'll choose these three columns:
| | 01:49 | packageTitle,
packageDescription, and packageGraphic.
| | 01:53 | Now, I am going to test my
recordset by clicking the Test button.
| | 01:58 | That shows me the data
that's returned from the database.
| | 02:02 | I'll click OK to close the dialog,
and then I'll also add a Sort parameter.
| | 02:07 | I'll pull down the sort list and choose
packageTitle, and then I'll leave this
| | 02:12 | second option set to Ascending.
| | 02:14 | Now I am ready to insert the
recordset into my current web page.
| | 02:19 | I'll click OK, and I won't see any
changes to the page in Design view.
| | 02:24 | But I'll go to Code view and expand to
fullscreen by pressing the F4 key, and
| | 02:30 | I'll see that a whole bunch of PHP
code has been added to my page at the top.
| | 02:35 | First, I'll see a require_
once directive that includes the
| | 02:39 | explorecalifornia.php file;
| | 02:42 | that's the file that
defines my database connection.
| | 02:44 | Then there is a sequence of code
that creates a select statement.
| | 02:48 | A select statement in SQL
retrieves data from the server.
| | 02:53 | This select statement is retrieving
the three selected columns packageTitle,
| | 02:57 | packageDescription and packageGraphic
from the packages table, and the order by
| | 03:02 | clause is sorting the data by the title field.
| | 03:06 | That string is my SQL statement.
| | 03:08 | The next line of code executes
the query by calling a PHP function
| | 03:13 | called mysql_query.
| | 03:15 | It passes in the query
string and the connection.
| | 03:19 | This little bit of code, starting with
the phrase, "or die," means that if the
| | 03:23 | query doesn't work for some reason,
then the PHP page should be terminated.
| | 03:29 | If everything goes well, at that
point, we start fetching data by calling a
| | 03:33 | function called mysql_
fetch_association, or assoc.
| | 03:38 | And finally, a variable named totalRows_
rsPackages is created, which is based on
| | 03:43 | the function mysql_num_rows.
| | 03:47 | We're passing in the recordset and getting
back the total number of rows in the recordset.
| | 03:52 | So, all that code taken together
executes the query, retrieves the data
| | 03:57 | from the server and stores it in a set of
variables, which you can use in your PHP pages.
| | 04:03 | I'll show you how to display the data
in various ways in some other exercises,
| | 04:08 | but I'll also point out one last bit of
code that's placed at the bottom of the
| | 04:12 | page and is very important.
| | 04:14 | It's called mysql_free_result.
| | 04:17 | This releases the reference to the
recordset in the PHP server's memory.
| | 04:22 | And it makes sure that you are releasing
any memory that's used by storing those
| | 04:26 | record sets when the current page
is finished processing on the server.
| | Collapse this transcript |
| Building an advanced recordset | 00:00 | Dreamweaver CS5's recordset builder
function can build either simple recordsets,
| | 00:05 | which retrieve data from a single table,
or if you have a little bit of knowledge
| | 00:10 | of SQL, you can use the
advanced recordset builder.
| | 00:14 | I'm going to be working in
a file named advancedrs.php.
| | 00:18 | For this demonstration, I'll use the
file advancedrs.php, which you'll find in
| | 00:23 | the root folder of the current side.
| | 00:26 | You build an advanced recordset by
going to the Bindings panel, clicking the
| | 00:31 | Plus button, and choosing Recordset or
Query, and then click the Advanced button.
| | 00:37 | The advanced recordset builder
requires a little bit of knowledge of SQL.
| | 00:42 | Whatever you know how to do with
SQL, you'll be able to do here.
| | 00:46 | I'm going to name this recordset
rsTours, and then I'll go down to the Tables
| | 00:51 | list, which you'll find in
the Database items pane.
| | 00:54 | I'm going to build a recordset that
joins or links two tables together:
| | 00:59 | packages, and tours.
| | 01:02 | The packages table has a packageId,
primary key column, and three descriptive
| | 01:06 | columns for the Title, Description, and Graphic.
| | 01:10 | The tours table also has a primary
key column, named tourId, and has a
| | 01:16 | foreign, named packageId.
| | 01:18 | I'm going to use the primary key and
the foreign key to join these tables
| | 01:23 | together in an SQL statement.
| | 01:26 | I'll use the recordset builder
to help me build this statement.
| | 01:29 | I will start with the tours table.
| | 01:32 | For each column that I want to include
in the data returned from the server,
| | 01:36 | I'll click on the column and
then click the Select button.
| | 01:40 | I'll start with the primary key column,
tourId, and I'll click Select, and I'll
| | 01:45 | see in the SQL statement that two
tables are included but only one column.
| | 01:50 | I'm going to clean this up a little
bit by removing the admin table, and then
| | 01:55 | I'll test my query to make sure that
it's valid, and I'm getting back this
| | 01:59 | single column from the one table in the query.
| | 02:03 | I'll click OK to close the
dialog, and then I'll continue.
| | 02:06 | I'll also include the name, the
blurb, the description, and the price.
| | 02:14 | For each column that I want to include,
I choose the column and click Select.
| | 02:19 | Now I'm going to include
columns from the packages table.
| | 02:23 | In the Database items list, I'll move
back to the packages table, and I'll
| | 02:27 | choose packageId and packageTitle.
| | 02:32 | So now in my Select statement, I have
the tourId, and a number of other columns
| | 02:37 | from the tours table, and then
columns from the packages table.
| | 02:41 | Now, I have to describe how the
two tables will be joined together.
| | 02:45 | This is where a little bit of
SQL knowledge goes a long way.
| | 02:49 | I'll go back to the tours table and choose
the packageId column, and then click Where.
| | 02:56 | Then I'll click at the end of the statement,
after the Where clause, and type in the Equals operator.
| | 03:03 | Then I'll go back to the packages table,
and choose the packageId column, and
| | 03:08 | click the Where clause again.
| | 03:10 | So now I'm saying that I'm selecting
all these columns from these two tables
| | 03:15 | where the packageId from tours
matches the packageId from packages.
| | 03:20 | I'm ready to test my query.
| | 03:22 | I'll click the Test button, and I
should see all of the data coming back,
| | 03:26 | joined together correctly.
| | 03:28 | In the first row, I have tourId, the name,
the blurb, description, and price, and
| | 03:34 | then in same row, I have the
packageId and the associated packageTitle.
| | 03:40 | I'll click OK, and then click OK again.
| | 03:44 | Just as with this simple recordset, all of
the finished PHP code is added to my page.
| | 03:50 | I'll scroll down to where the actual
SQL statement is placed, and show you that
| | 03:55 | it's just like the simple recordset.
| | 03:57 | It's just an SQL statement.
| | 04:00 | The more you know about SQL, the more
complex and powerful your queries can be.
| | 04:05 | I'd like to point out one thing that's
interesting about this SQL statement.
| | 04:09 | Notice that the word "description"
was placed in quotes, while the other
| | 04:13 | column names weren't.
| | 04:14 | That's because Dreamweaver looks at the
word "description," and identifies it as
| | 04:18 | a potential reserved
keyword in the SQL language.
| | 04:23 | It isn't a reserved keyword in all
versions of SQL, but just to make sure,
| | 04:28 | Dreamweaver wraps the name
of the column in those quotes.
| | 04:31 | If you have any similar troubles with
column names or other elements of your
| | 04:36 | database structure where those names
collide with reserved words in the SQL
| | 04:40 | language, you can fix your code in
exactly the same way, by wrapping the term
| | 04:45 | in quotes as needed.
| | 04:47 | Now I'll test the page, looking at it in
Live View, and I won't see any data yet.
| | 04:53 | But again, that's because I'm not doing
anything to display the data on the screen.
| | 04:57 | I'll show how to do that in a separate video.
| | Collapse this transcript |
| Displaying data with repeating regions | 00:00 | Once you've defined a recordset in a
PHP page, you can then display the data
| | 00:04 | in a number of ways.
| | 00:06 | For this demonstration, I'll
use a file named tours.php.
| | 00:10 | This file already has a recordset defined.
| | 00:14 | If you look at the file in Code View, you'll
see all the PHP code for lines 1 through 39.
| | 00:20 | You can also go to the Bindings
panel and find the recordset there, and
| | 00:25 | double-click it open it.
| | 00:27 | This is a simple recordset,
| | 00:29 | so it's best viewed in that
version of the recordset builder.
| | 00:33 | If you want to make any changes to the
recordset, you can do so either from here
| | 00:37 | or by manually modifying
the SQL code in the PHP page.
| | 00:42 | Now I'm going to preview the page in an
external browser, and I'll show you that
| | 00:48 | right now we're not actually
using the data in the page.
| | 00:52 | The page has all static HTML,
including one detailed instance of a tour
| | 00:58 | package, named Backpac cal.
| | 01:01 | I'll go back to the page in
Dreamweaver and look at the page in Design View.
| | 01:06 | I'll scroll down to that section,
| | 01:09 | I'll select the title in the package,
and then go back to Code View and show you
| | 01:14 | that all the information
about this tour is hard-coded.
| | 01:18 | We want to replace this
information with repeating data from the
| | 01:22 | packages recordset.
| | 01:24 | Here's how I'll do it.
| | 01:26 | I'll go back to Design View, and
I'll start with the title element.
| | 01:31 | I'll select that value, and
then I'll go to the Bindings panel.
| | 01:36 | I'll open the recordset, and
Dreamweaver shows me the three columns that are
| | 01:41 | being returned in the recordset.
| | 01:42 | I'll click on the packageTitle, and
I'll drag it into the place, dropping it on
| | 01:47 | top of this selected static text.
| | 01:50 | That replaces the static text with some
PHP code that outputs the packageTitle.
| | 01:57 | With that text selected, I'll go back
to Code View and show you that the PHP
| | 02:02 | output looks like this:
| | 02:04 | php echo, then the name of the recordset,
and then the name of the column as a string.
| | 02:13 | I'll do the same thing
for the package description.
| | 02:15 | I'll go to Design View, I'll select
the text for the package description,
| | 02:21 | I'll go to the Bindings panel, and
drag the packageDescription column on top
| | 02:26 | of the selected text.
| | 02:28 | Then I'll go back to Code View and
show you the exact same sort of code here.
| | 02:34 | You can do the same thing in Code View.
| | 02:35 | For example, the image source is
currently set to a hard-coded image file name,
| | 02:42 | but we have that
information also in the recordset.
| | 02:46 | I'll select the name of the file, but not
the location in which the file is stored.
| | 02:50 | Then I'll go to the Bindings panel, and
I'll drag the packageGraphic column on
| | 02:55 | top of the selected text.
| | 02:58 | That replaces the hard-coded graphic
file name with the dynamic file name
| | 03:02 | from the recordset.
| | 03:05 | I'll do something very similar in
the alt value for the current image.
| | 03:09 | That's also set to the title of
the package, so I'll select it,
| | 03:14 | I'll go to the Bindings panel and drag in
the packageTitle on top of the selected text.
| | 03:20 | Now let's take a look at
all of the generated code.
| | 03:24 | The tour description is using four
dynamic values, the packageTitle used twice,
| | 03:30 | both in the heading 2 and in
the alt value for the image.
| | 03:35 | Then the actual name of the image is
being drawn from the database here, and the
| | 03:39 | description is being drawn
from the database right here.
| | 03:42 | I'll save the changes, and then
I'll look at the page in Live View.
| | 03:47 | I'll update the copy of the file on the
testing server when prompted, then look
| | 03:52 | at Design View, and I'll see the result.
| | 03:55 | The output looks exactly the same as
it did before, but now it's dynamic.
| | 04:00 | The data is being drawn
from the database at runtime.
| | 04:04 | Right now, I'm only displaying one record.
| | 04:07 | I'm going to change this now to
repeating records, so that I see one instance of
| | 04:12 | this package information
for each row in the recordset.
| | 04:16 | I'll exit Live View, and then
in Design View, I'll locate the
| | 04:22 | package information.
| | 04:24 | I'll click anywhere inside the package
information, and then in the tag selector,
| | 04:29 | I'll choose tourDescription, the div
tag that wraps all that information.
| | 04:34 | Now, I'd like to make that div
tag repeat, once for each row.
| | 04:39 | I can do that either from the
menu or from the Insert panel.
| | 04:42 | I've been using the Insert panel a lot,
so this time I'll go through the menu.
| | 04:47 | I'll choose Insert > Data
Objects > Repeat Region.
| | 04:53 | I'll choose the only recordset in this
file, rsPackages, and I'll choose All
| | 04:59 | records, rather than 10
records at a Time, and click OK.
| | 05:03 | That div tag is now displayed with a
visual aid showing the word "Repeat."
| | 05:09 | That means that we're repeating
the div tag once for each row in the
| | 05:12 | selected recordset.
| | 05:15 | I'll look at the page in Live View again.
| | 05:18 | If prompted, I'll say yes, I want to
save my changes, and then I'll update the
| | 05:23 | file on the testing server, scroll down,
and show you that now I'm displaying
| | 05:29 | all the data for the selected table.
| | 05:31 | There are nine rows in this selected
table, and therefore nine instances of the
| | 05:36 | selected div tag in the repeating region.
| | 05:39 | So that's how you can dynamically
output data from a recordset, using the
| | 05:44 | Dreamweaver repeating region architecture.
| | 05:47 | You replace the literal values in
your HTML with dynamic values from your
| | 05:51 | recordset and then define the entire
div tag containing the data as a repeating
| | 05:57 | region, and the HTML is
generated at runtime by PHP and MySQL.
| | Collapse this transcript |
| Displaying data in a dynamic table| 00:00 | In a previous video, I showed how to
display data using a repeating region.
| | 00:06 | There's another approach, which is
to generate a dynamic HTML table.
| | 00:11 | For this demonstration, I'll use a file
named explorerlist.php, which you'll find
| | 00:16 | in the Explorers folder of the current site.
| | 00:19 | This file doesn't currently have
any record sets, so I'll add one.
| | 00:23 | It doesn't matter where the cursor is
if you're looking at it in Code view, all
| | 00:27 | of the code for the recordset will
always go at the top of the page with a
| | 00:32 | little bit of PHP code at the end.
| | 00:35 | With the page open, I'll go to the
Bindings panel and click the plus button and
| | 00:39 | choose Recordset query.
| | 00:42 | Make sure you're in the simple
version of the Recordset builder.
| | 00:45 | I'll name my new recordset rsExplorers.
| | 00:49 | The Connection should be set to
explorecalifornia, and the Table to explorers.
| | 00:55 | I'll click the Selected radio button,
hold down the Ctrl key on Windows or the
| | 00:59 | Command key on Mac, and choose
explorerId, firstName, lastName, dob and email.
| | 01:07 | I'll test my recordset and see that it
comes back in numeric order by primary
| | 01:12 | key, but I'd really like
it in order by lastName.
| | 01:17 | So I'll click OK, and then change the
Sort to lastName, and I'll test again.
| | 01:23 | And now it's coming back in
lastName alphabetical order.
| | 01:27 | I'll click OK and click OK to
insert the recordset into my page.
| | 01:33 | Now I'm ready to insert the dynamic table.
| | 01:36 | I'm still in Code view.
| | 01:37 | I'll scroll down the page until I
find where I want to place the table.
| | 01:42 | There is an h1 tag set that currently
is at line 71 in my version of the file.
| | 01:49 | I'll place the cursor after the
heading1 tags and then add in a paragraph tag
| | 01:54 | set by pressing Ctrl+Shift+P on
Windows or Command+Shift+P on Mac.
| | 01:59 | The Dynamic Table tool really only works
well when you're in Design view, so I'm
| | 02:05 | going to leave the cursor in that exact
location, and then go to Design view and
| | 02:10 | then I'll insert the dynamic table.
| | 02:12 | You can do this from the menu by choosing
Insert > Data Objects > Dynamic Data > Dynamic Table.
| | 02:20 | There's also an option in the Insert panel.
| | 02:23 | I'll use this menu choice, and in the
Dynamic Table tool dialog, I'll verify
| | 02:28 | that the rsExplorers recordset is
selected, it's the only one in this page, and
| | 02:33 | then I'll choose All records. I'll
set the Border to 0 and leave the Cell
| | 02:38 | padding and Cell spacing alone.
| | 02:40 | These are values that I'll prefer to
set later using cascading style sheets,
| | 02:45 | and then I'll click OK.
| | 02:47 | The dynamic table is added automatically
in the exact location where I had my cursor.
| | 02:53 | I'll save the changes by pressing Ctrl+S on
Windows or Command+S on Mac and
| | 02:58 | then I'll go up to Live View and copy the
file over to the server, and here's the result.
| | 03:04 | The data is retrieved from the server
and displayed in a dynamic HTML table.
| | 03:09 | I'll do a little bit of editing and formatting.
| | 03:13 | I'll exit Live View, and first I'm going to
delete the column that shows the primary key.
| | 03:19 | I'll click into the first cell in the
column and then drag down to the second.
| | 03:24 | I'll release the mouse button and press Delete.
| | 03:27 | I'll change the headings;
| | 03:29 | by default the heading
show the exact column names.
| | 03:33 | I'd like to show more friendly
information, so I'll change the firstName column
| | 03:37 | header to First Name, lastName to Last
Name, dob to Birthdate and for email,
| | 03:46 | I'll simply capitalize
the first character, Email.
| | 03:50 | I'll also click in the first cell of
the row and then drag to the last cell and
| | 03:54 | release, then in the Properties panel
I'll click Header, and that turns those into
| | 04:00 | TD tags in the HTML.
| | 04:03 | I'll save the changes, and then go to
Live View again, copying the file to the
| | 04:08 | testing server and I'll see that my
dynamic table is now much more friendly
| | 04:13 | and easy to look at.
| | Collapse this transcript |
| Formatting dynamic data| 00:00 | In a previous chapter of the video series,
I described how to use the Zend framework,
| | 00:05 | how to install and configure it in
your PHP installation so that you could
| | 00:10 | take advantage of all of its valuable
validation, formatting, and other tools.
| | 00:16 | I'm now going to show you how to use
the Zend framework's zendDate class to
| | 00:21 | format values that you
retrieve from your MySQL Server.
| | 00:24 | I'll start in Code View.
| | 00:26 | I'm working in the file
explorerlist2.php, in the explorers' folder of the
| | 00:32 | 05_bindingandbehaviors folder,
which is currently set as my site foot.
| | 00:37 | I'll start at the top of the page.
| | 00:39 | Before I use any class from the
Zend framework, I first have to include
| | 00:44 | the class definition.
| | 00:45 | So I'll place the cursor at the end of
the first PHP code block, and then I'll
| | 00:50 | press Enter to create a new line.
| | 00:52 | I'll go to the Insert panel, to the PHP
category, and I'll insert a new PHP code block.
| | 01:00 | Within the code block, I'll
use the require_once command.
| | 01:04 | I'll type in r-e-q, and press
Ctrl+Space, and I'll select the
| | 01:08 | require_once function.
| | 01:10 | Then I'll pass in the literal string
pointing to the name of the file, relative
| | 01:15 | to the Zend framework library folder, which
is already included in my PHP installation.
| | 01:21 | The relative location of the PHP
class definition is Zend/Date.php.
| | 01:28 | Now, I'm ready to use that
class to format my dates.
| | 01:32 | I'll first locate the
data that I want to format.
| | 01:34 | I'll go to Design View. Then in the
dynamic table, I'll click on the dob column.
| | 01:40 | Then I'll go back to Code View.
| | 01:43 | That takes me to the value I
am interested in formatting.
| | 01:47 | I'm going to take the value that I'm
currently outputting, the dob column of the
| | 01:51 | row rsExplorers variable,
| | 01:54 | I'll select that value - not including the
semicolon - and then I'll cut it to the clipboard.
| | 02:00 | Now, I'll place the cursor after the PHP
code block that's creating a loop over the data.
| | 02:07 | I'll create a new line after that code
block, then I'll go to the Insert panel
| | 02:11 | and click once on Code
Block to insert the code block.
| | 02:15 | Within the new code block, I am going to
create a new instance of the Zend/Date class.
| | 02:20 | It will look like this: zendDate = new,
and then I'll type in Zend_, and using
| | 02:29 | code hinting, I'll choose the Zend_Date class.
| | 02:33 | I'll create an opening parenthesis, and
then for the first value that's passed
| | 02:38 | in, I'll paste, and that pastes in
the dob expression that I cut from the
| | 02:44 | original dynamic table.
| | 02:46 | I'll type in a closing parenthesis and
a semicolon, and then clean up the code a
| | 02:50 | little bit to make it more readable.
| | 02:53 | Now, I'm going to move down to the
line that currently shows a syntax error.
| | 02:57 | This is where I removed the value that
I wanted to echo, or send to the browser.
| | 03:02 | And I'm going to replace it with an
expression that outputs the date object using
| | 03:07 | my selected formatting.
| | 03:08 | It will look like this.
| | 03:11 | I'll start with a dollar sign, then zendd.
| | 03:15 | That takes me to my variable zendDate.
| | 03:18 | I'll press Enter to select
it from the code hinting list.
| | 03:21 | Then I'll type in a dash, greater than,
and I'll select the toString function.
| | 03:26 | Make sure you choose the toString
function without the underscore prefixes.
| | 03:31 | I'll choose the function,
| | 03:33 | and then for the format, I'll pass
in a string that looks like this: an
| | 03:37 | uppercase M, a slash, a lowercase d,
another slash, and two lowercase yys.
| | 03:44 | I'll type into closing quote
and the closing parenthesis.
| | 03:48 | And now Dreamweaver shows
that there are no syntax errors.
| | 03:51 | So each time through the loop, I'm
creating a new instance of the zendData
| | 03:55 | class, passing in the value from the
database, and then within the loop, to
| | 04:00 | output, I'm using the toString
function of the zendDate object and passing in
| | 04:05 | my preferred formatting string.
| | 04:08 | Once again, you can look at the
documentation for the zendDate class, to find
| | 04:12 | your own preferred formatting strings.
| | 04:15 | I'll save and go to Live View, update
the file on the testing server, look at it
| | 04:21 | in Design View, and
there are my formatted dates.
| | 04:25 | You can format the dates any way you like,
using the date format values that the
| | 04:30 | zendDate class supports.
| | 04:32 | So in this example, I've shown you how
to use a bit of hand coding and used the
| | 04:37 | Zend framework's classes to do the
formatting, and combined that with the code
| | 04:41 | that was generated by
Dreamweaver as a dynamic HTML table.
| | 04:45 | You can now format the table as much as
you like, using whatever Cascading Style
| | 04:50 | Sheet or other formatting
tools you know how to use.
| | Collapse this transcript |
| Displaying the total number of records | 00:00 | Once you've placed a recordset in a
PHP page, it's very simple to display the
| | 00:05 | total number of records in the
recordset in your PHP output.
| | 00:09 | I'll demonstrate this with the file
explorerlist3.php in the explorers
| | 00:14 | folder of the web site.
| | 00:16 | I'll place the cursor before the
words "Current Explorers," in the heading
| | 00:20 | above the dynamic table.
| | 00:22 | And I'll type in the words "There are,"
and I'll delete the word "Current."
| | 00:26 | I am going to add a dynamic
value, known as a server behavior.
| | 00:32 | A server behavior is a bit of
generated PHP code that in many cases is using
| | 00:37 | data from a recordset.
| | 00:39 | I'll go to the Server Behaviors panel.
| | 00:42 | If you don't have this Server
Behaviors panel in your workspace, you can open
| | 00:45 | it by going to Window > Server Behaviors, or
pressing the associated keyboard shortcut.
| | 00:52 | In the Server Behaviors panel, I'll
click the Plus button, and I'll choose
| | 00:56 | Display Record Count > Display Total Records.
| | 01:00 | Then I'll click OK.
| | 01:02 | That adds in a dynamic expression,
| | 01:05 | the recordset TotalRecords property.
| | 01:08 | I'll look at the resulting value in Code View.
| | 01:11 | Here's what it looks like.
| | 01:13 | We're referring to a variable that's
set during the initial declaration of the
| | 01:17 | recordset, totalRows_rsExplorers.
| | 01:20 | I'll go to the section of the page
that's declaring the recordset, and show you
| | 01:24 | where that variable is being declared,
totalRows_rsExplorers = mysql_num_rows,
| | 01:32 | and then the recordset is passed in.
| | 01:33 | I'll save the change and look at the
page in Live View, copying it to the server.
| | 01:41 | I'll look at it in Design
View, and there is the result.
| | 01:45 | There are three Explorers in the database table.
| | 01:48 | You can place the output of the total
number of records anywhere on the PHP page,
| | 01:53 | as long as it's after the code that
retrieves the data from the server and sets
| | 01:58 | that PHP variable, and Dreamweaver
will help you insert the code very easily.
| | Collapse this transcript |
| Limiting records with paging controls | 00:00 | The PHP code for paging through a
recordset that is displaying a small set of
| | 00:06 | records and then giving the user
links to go page by page is a little bit
| | 00:11 | complex, but Dreamweaver will help
you generate that code very easily.
| | 00:16 | For this demonstration, I'll use a file
named tours2.php, which is in the root
| | 00:21 | folder of the current site.
| | 00:24 | This page already has a repeating region that
displays the tour packages from the database.
| | 00:31 | I'll Preview the page in an external
browser, copying the file to the server first.
| | 00:36 | In this version of the page, all nine
packages are displayed, which means that
| | 00:41 | the user has to scroll
quite a bit to see everything.
| | 00:44 | I'm going to add codes so that there
only three rows are displayed at a time,
| | 00:49 | and then links are added that the
user can use to move through the content.
| | 00:54 | I'll close the browser
and return to Dreamweaver.
| | 00:57 | First, I am going to edit the repeating
region, so it only displays three rows at a time.
| | 01:03 | I'll go to the Server Behaviors panel.
| | 01:06 | Here is the repeating
region that I added previously.
| | 01:09 | It's labeled Repeat Region
for the rsPackages recordset.
| | 01:14 | I'll double-click on the repeat region, and
that takes me to the Repeat Region dialog box.
| | 01:20 | I'll change it to only show three
records at a time and click OK.
| | 01:25 | I'll save my changes and open the
page again in an external browser.
| | 01:33 | Now, I am only seeing the
first three rows in the recordset.
| | 01:37 | The next step is to add hyperlinks that
will allow the user to page through the data.
| | 01:42 | So I'll close the browser and
return to Dreamweaver again.
| | 01:45 | You can place these links on
the page anywhere you want.
| | 01:48 | I am going to place them at the top of
the repeat section, after the heading.
| | 01:52 | I'll place the cursor after the text
Something for everyone, and press Enter.
| | 01:57 | Then I'll go to the
Server Behaviors panel again.
| | 02:01 | I'll click the Plus button, and go
to their Recordset Paging section.
| | 02:06 | You can add four links for Moving To the
First Page, the Previous Page, the Next
| | 02:10 | Page, and the Last Page.
| | 02:13 | I'll do these one at a time.
| | 02:15 | I'll choose Move To First Page.
| | 02:16 | The Link list shows you, Create a new
link for the word "First," and then a
| | 02:21 | number of existing links.
| | 02:23 | I am going to choose Create a new link
for the rsPackages Recordset and click OK.
| | 02:29 | Then I'll click after the link that's
been created and press the Spacebar.
| | 02:33 | I'll go back to the Server Behaviors panel.
| | 02:36 | Once again, I'll choose Recordset
Paging and this time choose Move To
| | 02:40 | Previous Page and click OK.
| | 02:43 | I'll click after those links and
press the Spacebar again, go to Server
| | 02:47 | Behaviors > Recordset Paging >
Move To Next Page, and click OK.
| | 02:54 | I'll click at the end of the links,
press the Spacebar one last time, and go
| | 02:58 | through the process again, selecting
Server Behaviors > Recordset Paging > Move
| | 03:04 | To Last Page, and I'll
click OK. This is just text.
| | 03:11 | You can change the text however you like,
or replace the text with your own images.
| | 03:15 | I'll save the change and go to Live View
and click Yes, and Yes, and then in the
| | 03:21 | page, I see my links.
| | 03:24 | If you try to clicking these links in
Live View, you won't see any reaction.
| | 03:28 | To really see this work, you
must use an external browser.
| | 03:32 | So I'll exit Live View, and
go to the external browser.
| | 03:36 | I am using Firefox.
| | 03:38 | I'll make sure I've copied the newest
version of the file over to the server,
| | 03:42 | and now I should be able to page
through the data by clicking the Next button.
| | 03:47 | I'll click Next again, I'll click
Previous and Previous again, and I can also
| | 03:52 | go to Last and First.
| | 03:54 | So that's how you can add
paging to your dynamic display,
| | 03:58 | displaying a limited number of records
and adding links that allow the user to
| | 04:02 | move forward and back as needed.
| | Collapse this transcript |
| Creating conditional regions | 00:00 | Dreamweaver CS5 has server behaviors
that let you output code conditionally.
| | 00:06 | There are six options for conditional
code built into Dreamweaver CS5, and you
| | 00:10 | can learn from the generated code
how to write your own conditions.
| | 00:15 | For this demonstration,
I'll use the file tours3.php.
| | 00:19 | It's in the root folder of my current web site.
| | 00:22 | In a previous video, I described how
to limit the number of records that were
| | 00:26 | being shown in a particular data set,
and then how to add hyperlinks that let
| | 00:31 | the user page through the data set.
| | 00:34 | I'll open the file in a browser, first
copying it over to the web site, and then
| | 00:39 | show that I can click through the Next
and Previous, but also show you that,
| | 00:44 | for example, when I'm on the First
page, I still see links for First and
| | 00:48 | Previous, and these links don't do anything.
| | 00:51 | And if I'm on the Last page, I
still see links for Next and Last.
| | 00:56 | Similarly, I would like to
hide those in this condition.
| | 00:59 | So, I'll close the browser
and return to Dreamweaver.
| | 01:04 | First, I'll deal with the
condition for the First and Previous links.
| | 01:09 | I'll click and drag to select those links.
| | 01:12 | Then I'll go to the Server Behaviors
panel, I'll click the Plus button, and
| | 01:17 | I'll go to Show Region.
| | 01:18 | Here are the six available server
behaviors for a conditional code.
| | 01:23 | You can show code if the recordset is
empty or not empty, if you're on the first
| | 01:27 | page or not the first page, or if
you're on the last page or not the last page.
| | 01:34 | I'm going to select Show if Not
First Page, and then make sure that I've
| | 01:39 | selected rsPackages -
| | 01:41 | it's the only available choice - and click OK.
| | 01:45 | So now, those links will only display
if I'm not on the first page of data.
| | 01:51 | Now I'll do the same thing
for the Next and Last links.
| | 01:54 | I'll click and drag to select those links,
I'll go to Server Behaviors,
| | 02:00 | I'll click the Plus button and choose
Show Region, and I'll select Show if Not
| | 02:06 | Last Page, and once again,
| | 02:08 | I'll click OK in the dialog box.
| | 02:11 | Here's what the generated code looks like.
| | 02:14 | The hyperlinks have been wrapped in if clauses.
| | 02:19 | That examines the current page number
of the recordset and compares it to the
| | 02:23 | total number of pages.
| | 02:25 | So, now I'll test the code in the browser.
| | 02:28 | I'll go to Firefox, updating the file on
the server, and in the initial display,
| | 02:33 | I see links for Next and Last.
| | 02:36 | If I click Next, I see all four
hyperlinks, because now I'm on the middle page.
| | 02:42 | And when I click Last, that takes me
to the last set of data and hides those
| | 02:46 | links because they're no longer appropriate.
| | 02:49 | Now, I'll go Previous.
| | 02:51 | I'll see all four links.
| | 02:52 | I'll click Previous again, and now
I'll only see the first two links.
| | 02:57 | So, conditional code is something
that's very easy to generate in Dreamweaver.
| | 03:01 | The code itself is a little bit on the
complex side, but by using Dreamweaver
| | 03:06 | server behaviors, you save yourself an
enormous amount of time, and get a very
| | 03:10 | common behavior that users appreciate.
| | Collapse this transcript |
|
|
6. Building Data Entry FormsBuilding a simple data entry form| 00:00 | Most dynamic web applications use HTML
forms to collect data from the user and
| | 00:06 | send it to the server.
| | 00:07 | In this chapter, I'll show you how to
build these forms, and how to process the
| | 00:11 | results with PHP code.
| | 00:13 | I'll be working with a version of my
web site in the exercise files area.
| | 00:17 | That's in a folder named 06_forms.
| | 00:21 | I'll go to my site definition, by
selecting Site > Manage Sites, and then
| | 00:26 | clicking Edit to edit the site definition.
| | 00:29 | Then I'll browse for the local site folder.
| | 00:33 | I'll go to my exercise files area,
and I'll double-click on 06_forms.
| | 00:39 | I'll select it and save the changes, and
then I'll close the Manage Sites dialog.
| | 00:44 | I'm going to start with a page that's
already in this site, named simpleform.php.
| | 00:51 | It has an HTML table with two labels of
First Name and Last Name, and an empty
| | 00:57 | column to the right.
| | 00:59 | This is where the data entry form
controls are going to be placed.
| | 01:03 | The first step in creating a data entry
form is to create a set of tags named form.
| | 01:09 | You can do this easily in
Dreamweaver through the Insert panel.
| | 01:12 | I'll place the cursor after the HTML table.
| | 01:15 | Eventually, the table will be inside
the form, but I'll need to move it after
| | 01:20 | the form is created.
| | 01:22 | I'll go to the Insert panel, and
I'll choose the Forms category.
| | 01:26 | Then I'll add a form.
| | 01:29 | Now, I'll go to the HTML table.
| | 01:31 | I'll click anywhere in the table, then
right-click and choose Table > Select Table.
| | 01:37 | I'll cut the table to the clipboard.
Then I'll click inside the form that's
| | 01:42 | designated by the dashed
line, and then I'll paste.
| | 01:47 | The table is now a part of the form,
and any data entry controls that I place
| | 01:52 | inside the table will be
submittable to the server.
| | 01:55 | Next, I'm going to add
some simple form controls.
| | 01:58 | I'll click into the second column.
| | 02:00 | Now, if you have any trouble clicking
into that column, you can right-click on
| | 02:04 | the table and choose
Table > Expanded Tables mode.
| | 02:08 | Dreamweaver gives you this mode to make
it a little bit easier to click around
| | 02:12 | in a small table like this.
| | 02:14 | When you're done with Expanded Tables
mode, you can click the exit link at the
| | 02:18 | top of the editing area.
| | 02:20 | With the cursor in the second column
of the first row, I'll go to the Insert
| | 02:24 | panel again, and I'm still in the
Forms category, and I'll add a text field.
| | 02:30 | I'll give the text field a value of
firstname, all lowercase with no spaces.
| | 02:36 | I don't need a label, so I'll choose
No label tag, and leave the Label entry
| | 02:40 | blank, and click OK.
| | 02:43 | That adds the form
control where I had my cursor.
| | 02:46 | Now, I'll repeat the process for the last name.
| | 02:49 | I'll click into the cell, go to the
Insert panel, and choose Text Field again.
| | 02:55 | I'll give this one an ID of lastname, and once
again I don't need a label, and I'll click OK.
| | 03:02 | Finally, I'll add a button.
| | 03:04 | I'll place the cursor in
the second column, last row.
| | 03:08 | I'll go to the Insert panel and scroll down
toward the bottom, until I find the button.
| | 03:14 | I'll click once to add the button.
| | 03:17 | I'll give it an ID of submit, and once again,
I'll leave the Label blank, and click OK.
| | 03:23 | Notice that Dreamweaver sets a value
property with the word "Submit" with the
| | 03:28 | initial character uppercased.
| | 03:30 | It also sets the Action to
something called Submit form.
| | 03:33 | Now, let's take a look at the resulting code.
| | 03:36 | Each of the data entry controls
is represented by an input tag.
| | 03:40 | The input tag has both a name and an ID.
| | 03:43 | The name is used to designate the
name of the resulting PHP variable when
| | 03:48 | the form is submitted.
| | 03:50 | You can use the ID in JavaScript
code in the web browser to address the
| | 03:55 | control's value and do
validation, or other processes.
| | 03:59 | Finally, the input button, which has an
ID and a name of submit and a value of
| | 04:04 | Submit uppercased, is used to submit the form.
| | 04:08 | When the user clicks this button, the
data in the form is sent to the server.
| | 04:13 | Notice a couple of other things.
| | 04:15 | The method is set to post.
| | 04:17 | There are two commonly used
methods for data entry forms.
| | 04:20 | They're called post and get.
| | 04:23 | Typically, you set the method to
post for a data entry form in PHP, and
| | 04:27 | the action, when left blank, results in
sending the data to the same page that submitted it.
| | 04:33 | That's exactly what we want to happen,
and we're going to leave the value blank.
| | 04:38 | I'll save the changes, go back to
Design mode, and exit Expanded Tables mode.
| | 04:44 | I'll save my changes by pressing
Ctrl+S on Windows, or Command+S on Mac, and
| | 04:49 | then I'll preview the
page in an external browser.
| | 04:52 | I'm using Firefox, but you can
use whatever browser you like.
| | 04:56 | I'll type Davey Jones and submit.
| | 05:00 | It takes a moment to submit and process
the form the first time, but when it's
| | 05:04 | re-presented, you'll see that
the data entry form is now blank.
| | 05:08 | That's a visual clue that you're
viewing the page for the second time.
| | 05:12 | Right now, we aren't doing anything
with the data that was sent to the server,
| | 05:16 | but you are seeing the form
being submitted and re-presented.
| | 05:19 | I'll show you how to handle those
values being sent from the form with a little
| | 05:23 | bit of PHP code in the next video.
| | Collapse this transcript |
| Handling form submissions with PHP| 00:00 | Once you've created a working data
entry form, you can then handle your form
| | 00:04 | submissions with a little bit of PHP code.
| | 00:08 | For this demonstration, I'll
use the file simpleform2.php.
| | 00:13 | It has a copy of the form that
I created in a previous video.
| | 00:17 | The first step is to remember what
the names of your form controls are.
| | 00:21 | When I created this form,
I created two text controls.
| | 00:25 | The first one had a name and ID of firstname.
| | 00:28 | You'll need to remember those values in
order to handle your PHP form submission.
| | 00:34 | To make this easy to code,
I'll use the Bindings panel.
| | 00:37 | The Bindings panel lets you set up
form and other types of variables that you
| | 00:42 | can then easily insert into your PHP code.
| | 00:46 | I'll go to the Plus button,
and I'll choose Form Variable.
| | 00:50 | I'll set a Form Variable name of
firstname, matching the name and ID of the
| | 00:55 | first form control, and I'll click OK.
| | 00:58 | Then I'll repeat the process to
create a Form Variable for lastname.
| | 01:04 | By placing these items in the Bindings panel,
you're not actually changing the page yet;
| | 01:08 | you're just creating a bit of reusable code
that you can add to your page as you need to.
| | 01:14 | Next, I'll look at the page in Code
View, and I'll go to the top of the page.
| | 01:19 | The first time the page is viewed, I'm
only going to see the data entry form,
| | 01:24 | but the second time the page is
viewed after the form has been submitted, I
| | 01:28 | want to get the values that the user typed
into the form and display them on the screen.
| | 01:33 | I need a little bit of PHP
conditional code to do that.
| | 01:37 | I'll place the cursor after the body
tag, and before the form, and make a
| | 01:41 | little bit of space.
| | 01:42 | Then I'll add a PHP code block.
| | 01:44 | I'll go to the Insert panel to the PHP
category, and I'll click on Code Block.
| | 01:50 | Then I'll make a little bit of
extra space inside the code block.
| | 01:55 | Next, I'm going to ask the
question, has the form been submitted?
| | 02:00 | You can do this by checking for a particular
variable, and asking whether it's set yet.
| | 02:05 | The particular variable I'm
interested in is the firstname variable.
| | 02:10 | Even if the user doesn't type
anything into it, it will still create a form
| | 02:14 | variable when the form is submitted.
| | 02:15 | I'll use a PHP conditional statement,
if, and then I'll put in a pair of
| | 02:21 | parentheses, and then a pair of braces.
| | 02:26 | Within the pair of parentheses, I'll
use the isset function, and once again a
| | 02:31 | pair of parentheses.
| | 02:32 | I'm going to add the reference to the
firstname form variable between the parentheses.
| | 02:38 | Before I do this, I'm going down to
the Properties panel, and I'll click
| | 02:42 | Refresh, or press F5.
| | 02:44 | This causes Dreamweaver to read the
page that I've just hand-coded, and it will
| | 02:48 | give it the context to
correctly add the PHP code I want.
| | 02:53 | Next, I'll go to the Bindings panel,
I'll locate my firstname variable, and I'll
| | 02:58 | drag it and place it between the
parentheses of the isset function.
| | 03:03 | So, now I'm asking the
question, does this variable exist?
| | 03:07 | And if it does exist, I want to output
this and the other variable to the screen.
| | 03:12 | So, now I'll place the cursor between
the curly braces, and I'll use the echo
| | 03:17 | command a number of times
to output some information.
| | 03:20 | I'll say echo, and then the word
"Welcome," comma, space, I'll make sure to end
| | 03:26 | that statement with a semicolon.
| | 03:28 | I'll type the word "echo" again.
| | 03:31 | Once again, I'll refresh
before I use the Bindings panel.
| | 03:35 | I'll go to the Bindings
panel and drag in the firstname.
| | 03:38 | Then I'll put in a dot.
| | 03:40 | In PHP, that means I'm going to
append, or add a value after that.
| | 03:44 | Then I'll put in a space
wrapped in quotes, and another dot.
| | 03:48 | I'll once again refresh, go to the
Bindings panel and drag in the lastname, and
| | 03:54 | I'll close that statement with a semicolon.
| | 03:57 | Finally, I'll add one more echo command,
and explicitly add a break tag, or br
| | 04:03 | tag, to cause a line feed
at the end of this line.
| | 04:07 | So now, I'm handling and outputting the
values that are submitted from the form,
| | 04:12 | but I'm only doing this if the form
was submitted already and this is the
| | 04:15 | second time I'm viewing the page.
| | 04:18 | I'll save my changes, and I'll
test the page in an external browser.
| | 04:26 | When the form opens, I'll click into the
first control, and I'll type Davey Jones.
| | 04:33 | I'll click Submit, and when the
form is submitted, I see the response,
| | 04:37 | Welcome, Davey Jones.
| | 04:39 | This response is created by the echo
commands within the conditional code that's
| | 04:44 | placed above the form.
| | 04:45 | So, that's a look at the basics of
how data entry forms work, and how you
| | 04:49 | process them with PHP code.
| | 04:52 | If your form was set up with a method of
post, your variables will appear like this:
| | 04:57 | dollar underscore POST, bracket, then
the name of the form control, wrapped in
| | 05:02 | quotes, close bracket.
| | 05:04 | And you can check to see whether the
variable exists at any point by wrapping it
| | 05:08 | in the PHP isset function.
| | Collapse this transcript |
| Creating a customer email form| 00:00 | You can apply your knowledge of HTML
forms and PHP to very common web tasks,
| | 00:06 | such as collecting information from a
user, and sending an email from your PHP code.
| | 00:12 | In the remaining videos of this chapter,
I'll show you how to do this task, using
| | 00:16 | a data entry form with a
variety of input controls.
| | 00:20 | I'm working with the file join.php
which is under the Explorers folder in the
| | 00:25 | web site root for this chapter.
| | 00:28 | This file already has a data entry form.
| | 00:31 | The form was created as part of a
previous video series named Dreamweaver
| | 00:35 | CS5 Essential Training.
| | 00:37 | You can learn more about the
structure of this form in that course.
| | 00:41 | One particular thing I want to point
out about this form is that it uses a
| | 00:45 | particular kind of element called a
legend, and when you look at this particular
| | 00:49 | form in Dreamweaver CS5, it looks like the
legend overlaps some of the data entry controls.
| | 00:56 | You can verify that this won't happen when
you actually run the page in the browser.
| | 01:00 | I'll use the feature called Inspect.
I'll click the Inspect button and I'll copy
| | 01:06 | the file over to the testing server and
then I look at the file in Split View.
| | 01:11 | I'll scroll down to the data entry
form and I'll click on the legend element,
| | 01:16 | and Dreamweaver matches up the element
seen in Live View on the right with the
| | 01:21 | code, seen in Code View on the left.
| | 01:23 | I can also run the same file in the
external browser, and show you that the form
| | 01:30 | looks fine when you see it there.
| | 01:33 | This data entry form has three
different sections, but they're all part of
| | 01:37 | the same HTML form.
| | 01:39 | There is a first name, last
name, email, address, and so on.
| | 01:43 | There's login information and profile
information at the bottom, and the Join button.
| | 01:49 | When you click the Join button, it triggers some
validation tools that are already built into the form.
| | 01:55 | The password and confirm password
elements use validation tools that are a part
| | 02:00 | of this Spry/Ajax Framework.
| | 02:02 | Spry is a set of JavaScript and CSS
files that are delivered by Dreamweaver CS5
| | 02:09 | and are included in this form.
| | 02:11 | In this particular form, the password
and confirm password elements are required
| | 02:16 | and they must match.
| | 02:17 | I'll type in some values, and I'll
make sure that they match, and you'll see
| | 02:24 | that the validation messages appear
and disappear as I type, then I'll scroll
| | 02:28 | down and click the Join button and you'll
see that that simply reloads the form.
| | 02:34 | Our job in the remaining videos is to
add some more validation tools to the form
| | 02:40 | to capture all of the data being sent
in by the form, not just the text fields,
| | 02:45 | but also these check box elements
and radio buttons, and then finally, to
| | 02:50 | process the data entry and create an
email that you can send from the server.
| | 02:56 | Along the way I'll work in copies of
this file, this one is called join.php.
| | 03:01 | In the next exercise I'll use join2.php,
in the next one join3.php, and so on.
| | Collapse this transcript |
| Validating form controls with Spry| 00:00 | Dreamweaver CS5 makes it very easy to
add client-side validation to your data
| | 00:05 | entry forms using validation controls
that are part of the Spry framework.
| | 00:11 | This isn't a new feature;
| | 00:12 | Dreamweaver CS4 had it as well, but
the number of available controls for
| | 00:16 | validation has expanded in Dreamweaver CS5.
| | 00:18 | I will show you how to add one of
these controls and configure it.
| | 00:22 | The data entry form that's already been
created in the site has some validation
| | 00:28 | tools but not everything we need.
| | 00:30 | Let's take a look at the database
structure that matches this data entry form.
| | 00:34 | I will go to the Databases panel, to the
Explore California database connection,
| | 00:40 | and then to the Tables list.
| | 00:42 | Here is the table that matches the
data entry form, and eventually we will
| | 00:45 | receive data from it.
| | 00:48 | The data entry form has controls
that match the columns in this table.
| | 00:53 | So there is a text field for the
firstName and a matching firstName column, a
| | 00:57 | text field for the lastName and a
matching lastName column, and so on.
| | 01:02 | Notice that many of these columns
are marked in the database as required:
| | 01:06 | the firstName, the
lastName, the e-mail, and so on.
| | 01:09 | I am going to modify the form to make
sure that the user enters values that are
| | 01:14 | expected by the database.
| | 01:17 | I won't do this for the
entire form in this exercise.
| | 01:19 | I will just do a couple of the controls.
| | 01:22 | You'll have enough information
to complete the task on your own.
| | 01:25 | I am going to apply a required
validation rule to these three controls, for the
| | 01:31 | First Name, Last Name, and Email Address.
| | 01:34 | I will start with the First Name.
| | 01:36 | I will click on the Control, then I will go
to the Insert panel, to the Spry category.
| | 01:44 | In Dreamweaver CS5, there are many
validation tools available, including one
| | 01:50 | for a TextField, for Textarea, Checkbox, Select,
Password, Password Confirm and Radio Group.
| | 01:58 | I'm going to apply the
Spry Validation TextField.
| | 02:02 | I'll click once, and that adds the
code around the text field that's needed.
| | 02:08 | Now let's take a look at the
Spry text field properties.
| | 02:10 | I will go to the Properties panel.
| | 02:13 | You can leave the name of the text field alone.
| | 02:15 | I will match it to my control.
| | 02:17 | I will call it spryfirstname.
| | 02:21 | The Type list includes many
different data types that you can look for.
| | 02:25 | I don't need any particular data type
here, so I'll leave that set to None.
| | 02:31 | If you know how to use regular
expressions - a way of creating string formats -
| | 02:36 | you can choose Custom, and then
you'll be able to enter a pattern.
| | 02:40 | You can also add a minimum number of
characters and a maximum number of characters.
| | 02:44 | For example, in the database, the First
Name text column allows up to 50 characters.
| | 02:51 | So I can match that in my Spry validation.
| | 02:55 | When I select the maximum number of
characters, the Preview states switches to
| | 02:59 | something called Exceeded Max Number
ofCharacters and at this point, I can
| | 03:03 | change the error message that would display.
| | 03:05 | I am going to switch the Preview state
back to valid, and show you that there's
| | 03:10 | a bit of text on the form
already that we aren't going to need.
| | 03:15 | I'll click into the Required element,
and delete it, and I'll do the same thing
| | 03:20 | for the versions next to Last Name and Email.
| | 03:26 | Then I'll go back to the Spry text
field for spryfirstname, and I'm going to
| | 03:30 | indicate when I want to validate.
| | 03:33 | By default, validation happens on
submit, meaning when the user clicks the
| | 03:38 | button for the form.
| | 03:39 | You can also cause validation to
happen on Blur, which means when the user
| | 03:44 | clicks or tabs out of the control, and on
Change, which means when the user types.
| | 03:50 | Validating on Change is overly
aggressive for my money, so I will uncheck that
| | 03:55 | option, and we'll only
validate on Blur and on Submit.
| | 04:00 | Now I'll follow the same
steps for the Last Name control.
| | 04:03 | I will click the Control, go to
the Insert panel and choose Spry
| | 04:09 | Validation TextField.
| | 04:11 | I'll click into the Properties panel,
into the name of the control, and
| | 04:15 | change it to sprylastname.
| | 04:17 | I will once again set the maximum
characters at 50, I will change the Preview
| | 04:24 | state back to Valid, I will add the
Validate on Blur, and once again, I am
| | 04:30 | leaving Required checked.
| | 04:32 | Now, let's do the Email.
| | 04:33 | I will click the Control.
| | 04:36 | I'll add the Spry Validation TextField.
| | 04:40 | This time, I'll set the Type to Email Address.
| | 04:44 | Notice that the Preview
state switches to Invalid Format.
| | 04:47 | I am going to change that string by
clicking into the preview state and changing
| | 04:53 | that text to Expecting e-mail format.
| | 04:56 | Then I will click back on the text field.
| | 05:00 | I will add Validate on Blur, and
the Maximum characters set to 50.
| | 05:07 | Finally, I'll change the name of
the Spry TextField to Spryemail.
| | 05:13 | So now I've added
validation to these three controls:
| | 05:16 | First Name, Last Name, and Email.
| | 05:19 | I'll save my changes, and I'll be told
by Dreamweaver that two new files are
| | 05:24 | being added to my web site,
named SpryValidationTextField.css and
| | 05:29 | SpryValidationTextField.js.
| | 05:32 | These files are used by Dreamweaver
at runtime in the browser to cause the
| | 05:37 | validation to happen.
| | 05:39 | When you deploy your site to your
production server, you need to make sure that
| | 05:43 | these files are included.
| | 05:44 | I will click OK, and then I'll
test the page in an external browser.
| | 05:49 | I'll make sure that I am copying
everything over to my testing server, and then
| | 05:58 | I'll scroll down to the bottom and
click the Join button, and show that the
| | 06:02 | three validation errors are being displayed.
| | 06:05 | I'll click into the First Name, and
type "Joey," and the Last Name Smith, and
| | 06:10 | notice that as I tab, the
validation errors are being cleared.
| | 06:14 | That's because I added the Blur option
for when I wanted to do the validation.
| | 06:19 | Now, I'll type in an e-mail address,
but I'll type it in incorrectly.
| | 06:26 | I see the message, Expecting email
format, and that's because I am missing the
| | 06:30 | dot, and the characters at the end
that exist in every e-mail address.
| | 06:35 | So I'll click into the e-mail
address again, and add the .com.
| | 06:39 | I'll tab again, and now the field is valid.
| | 06:43 | I'll also go down to my Password and
Confirm Password elements and type some
| | 06:47 | values in that will be valid.
| | 06:51 | And then, if I were actually
submitting data to the server, I'd be ready to
| | 06:55 | click the Join button.
| | 06:57 | So that's a look at how to add some
additional validation to your data entry
| | 07:01 | form using Spry Validation components.
| | 07:05 | The Spry Library is available for free
from Adobe on opensource.adobe.com, but
| | 07:12 | it's also included with Dreamweaver CS5,
and you've seen how Dreamweaver CS5
| | 07:17 | generates most of the code you need for you.
| | 07:20 | It's worth looking at the code that's
generated by Dreamweaver to implement
| | 07:24 | these features of the Spry Framework.
| | 07:26 | The Spry framework can be
downloaded for free from Adobe's web site.
| | 07:30 | Go to www.adobe.com/go/spry.
| | 07:38 | This will take you to the
latest version of the Spry framework.
| | 07:42 | You can download this for free, take a
look at the documentation, and use all of
| | 07:47 | the elements of the Spry framework,
even those elements that aren't
| | 07:50 | automatically implemented by Dreamweaver CS5.
| | Collapse this transcript |
| Populating a list control with dynamic data| 00:00 | In data entry forms that
collect personal information,
| | 00:04 | it's very common to present a
list of available states or other
| | 00:08 | geographical regions.
| | 00:10 | In a static HTML page, these sorts of lists
have options that are filled in manually.
| | 00:15 | For example, in this file, join3.php,
there's a pulldown list, or a select control.
| | 00:23 | The options in this control are listed manually.
| | 00:26 | If you select the control in
Dreamweaver and then go down to the Properties
| | 00:30 | panel, then click the List Values button,
| | 00:33 | you'll see the list of items that
have been manually added to the list.
| | 00:37 | In many situations though, it's a good
thing to populate these sorts of lists
| | 00:42 | from a database on the server.
| | 00:43 | I'll show you how to fill this sort of
controlling with dynamic data from a database table.
| | 00:49 | First, you'll need to make sure that your
database connection is set up correctly.
| | 00:54 | Go to the Databases panel, to the
explorecalifornia database connection, and
| | 00:59 | double-click it to open
the MySQL connection dialog.
| | 01:02 | The files that are included with
this course have been configured for
| | 01:06 | Windows and WAMP server.
| | 01:09 | The password is set to a blank string.
| | 01:11 | If you're working on Mac with MAMP,
type in a password of root, r-o-o-t.
| | 01:17 | Then, either way, click the Test button.
| | 01:21 | If you get this dialog, indicating you
haven't specified a password, click OK,
| | 01:25 | and click Test again.
| | 01:28 | Then regardless of whether you're
working on Mac or Windows, you should see the
| | 01:32 | message that the
connection was made successfully.
| | 01:35 | Click OK, and click OK.
| | 01:39 | Open the explorecalifornia database
connection, and open its Tables list, and from
| | 01:44 | there, go to the states table.
| | 01:46 | You'll see that the states table has
two columns: stateId and stateName.
| | 01:51 | These match the values that are
going to be used in the pulldown list.
| | 01:55 | Right-click on the table and choose
View Data, and you'll see that the table is
| | 02:00 | populated with all the
data you need for the list.
| | 02:04 | Click OK to close the panel. Click on
the List Values button again and click
| | 02:10 | the minus button a whole bunch of times.
| | 02:16 | You're going to remove all of the static
data in the dynamic list, and then click OK.
| | 02:23 | The next step will be to add a recordset
to this page that retrieves the state's
| | 02:28 | data from the states table on the database.
| | 02:32 | Go to the Bindings panel, click the
Plus button and choose Recordset (Query).
| | 02:38 | Name your new recordset rsStates.
| | 02:42 | Change the table to states.
Leave the column is set to All.
| | 02:47 | Notice that you'll be retrieving the
data for both the stateId and the stateName
| | 02:51 | column. And set the Sort
parameter to the stateName.
| | 02:56 | Click Test and you should see the data
returned in alphabetical order, by stateName.
| | 03:03 | Click OK, and click OK again.
| | 03:07 | Now your recordset is a part of the page.
| | 03:09 | Peak at Code view, and you'll see that
the code for implementing the recordset
| | 03:14 | is at the top of the page, including
some boilerplate PHP code, and the actual
| | 03:20 | SQL statement that
retrieves the data from the server.
| | 03:24 | Go back to Design View and once again
click on the pulldown list which now
| | 03:29 | shows that it's empty. Click Dynamic.
| | 03:32 | You'll add data from the recordset.
| | 03:34 | Under Options from Recordset, select rsStates.
| | 03:38 | Set the values to stateId,
and the labels to stateName.
| | 03:43 | You can also, if you like, add a static
option. The static option would be an item
| | 03:48 | such as choose a state. For this
example, we'll leave that blank.
| | 03:54 | Click OK, save your changes, and then
test the page in an external browser.
| | 04:00 | When the page opens, the data is
retrieved from the server and the pulldown list
| | 04:07 | is populated with the dynamic data.
| | 04:09 | Let's take a look at the
generated code for the select control.
| | 04:13 | Close the browser, and in Dreamweaver
go to Code View, and you'll see that the
| | 04:18 | select control now loops over the
recordset, and creates one option element for
| | 04:24 | each item in the recordset.
| | 04:27 | Here's the actual option element, and
all the rest of this code is executing
| | 04:31 | the loop over the recordset so that you
get one item in the recordset for each
| | 04:36 | item in the database.
| | 04:38 | So that's a look at how to
retrieve data from the database server and
| | 04:42 | implement a dynamic pulldown list or
list control without having to do any
| | 04:47 | hand coding on your own.
| | Collapse this transcript |
| Working with multiple checkbox controls| 00:00 | One of the most complex skills you need
to learn to work with data entry forms
| | 00:05 | is how to deal with multiple choice
questions in a form that are represented by
| | 00:09 | multiple check box controls.
| | 00:12 | A single check box control is
dealt with as a yes or no question.
| | 00:17 | If the check box is selected, that means
the user has selected the option, and if
| | 00:21 | it's deselected, that means no.
| | 00:23 | But with multiple check box selections
to a single question, one very common way
| | 00:28 | of dealing with it is to give all the
check boxes the same name, and then to
| | 00:32 | handle the results on the server
using a little bit of PHP code.
| | 00:36 | I'll demonstrate how to do this with
a version of my data entry form called
| | 00:40 | join4.php, in the explorers folder.
| | 00:44 | The first step is to make sure that all
of your check boxes are named the same,
| | 00:48 | and that they have a little bit of
extra notation at the end of the name that
| | 00:52 | turns them from a simple
variable into something called an array.
| | 00:56 | An array is an ordered collection of
data. For example, this check box
| | 01:01 | with a value of Backpack Cal has a
name of interested, and if I look at the
| | 01:06 | properties for the other check boxes in this
set, you'll see they all have this same name.
| | 01:11 | In order to deal with them in PHP,
change the name of the check box and add a
| | 01:17 | beginning and ending bracket -
| | 01:20 | that's the square bracket character,
not the curly brace - and do the same thing
| | 01:24 | for each of these check boxes.
| | 01:27 | I'll click on each one in turn and type
in the beginning and ending bracket, and
| | 01:31 | then I'll be ready to do a
little bit of hand coding in PHP.
| | 01:36 | The actual processing of the PHP
code is not something that Dreamweaver
| | 01:40 | will help you with.
| | 01:42 | It's one of those circumstances
where you just have to code it yourself.
| | 01:46 | I have nine check boxes,
| | 01:48 | they all have the same name, and they
all have the beginning and ending brackets
| | 01:51 | at the end of the name, indicating
that they will be an array of values.
| | 01:56 | Also notice that each of the check
boxes has a unique, checked value.
| | 01:59 | Let's take a look at how that is
reflected in the actual HTML code.
| | 02:04 | I'll go to Code View and show you that
each of the check boxes is an input control.
| | 02:09 | It has the name that I've assigned
of interested with the array notation.
| | 02:14 | The type is check box. The ID is the
same as the name right now, but that's
| | 02:19 | something you might want to change later.
| | 02:21 | Then the value for each of
the check boxes is unique.
| | 02:26 | Now when the user submits the form, we're
going to be submitting the form back to itself.
| | 02:33 | To make that happen, I've set the
Action attribute using a PHP expression of
| | 02:38 | _server PHP_self.
| | 02:41 | That means the current page
as it's seen by the browser.
| | 02:45 | So now go to the top of the code.
| | 02:47 | Whenever you place code in a PHP page
that already has a database connection
| | 02:51 | include, place the custom PHP code after that.
| | 02:56 | That will ensure that Dreamweaver can
still find the connection for further
| | 02:59 | work with databases.
| | 03:01 | After the require_once command for the
database connection, I'll create a new PHP code block.
| | 03:08 | Then within the code block, the first
question I'll ask is, has the form been submitted?
| | 03:14 | The button in the form has a name of
Submit, and that's going to create a new
| | 03:18 | post variable named submit
when the form is submitted.
| | 03:21 | So I'm going to use a PHP function called isset.
| | 03:24 | I'll type the first few characters of
the function, iss, and press Ctrl+Space,
| | 03:32 | and there's my function, isset.
| | 03:35 | Does the submit variable
in the post-array exist?
| | 03:39 | That code will look like this, $_POST,
with post in all uppercase, then
| | 03:46 | bracket, quote, submit, close quote,
close bracket, close paren and close paren.
| | 03:55 | So, if this condition is true, that
means the form has been submitted.
| | 04:00 | I'll add a pair of curly braces where
I can place code that I want it to execute
| | 04:04 | only in that condition.
| | 04:06 | Now, I'll ask the question, has the
user checked any of the check boxes?
| | 04:11 | Once again, I'll use the isset function.
| | 04:14 | If the user checks at least one check
box, there will be a post variable with
| | 04:19 | the name of the check box,
and it will be an array.
| | 04:22 | If they haven't checked any of the check
boxes, than that variable won't exist at all.
| | 04:27 | So, once again, I'll use an if command,
and I'll call the isset function, and
| | 04:33 | this time, I'll look for the variable 'interested.'
| | 04:37 | Notice in this circumstance, I don't
put in the opening and closing bracket.
| | 04:42 | I only put that into the HTML code.
| | 04:45 | When the user selects one or more items
though, this variable will show up as an array.
| | 04:52 | Once again, I'll add a pair of braces,
and I'll also add an else section for
| | 04:57 | the alternative state.
| | 04:58 | I need to make sure that I've added the
extra parenthesis at the end of the line
| | 05:02 | there, and that'll fix my syntax error.
| | 05:05 | In the condition where the user has
checked at least one of the check boxes,
| | 05:08 | I'm going to transform the array - which is
complex object - into a comma delimited string.
| | 05:15 | For that, I'll use the PHP implode function.
| | 05:19 | It looks like this.
| | 05:20 | I'm going to create a
variable called strInterested.
| | 05:23 | It'll be a string values,
| | 05:25 | so I'm prefixing it with str, and I'm
going to get this value using the implode
| | 05:30 | function, which looks like this.
| | 05:32 | You pass two values into implode.
| | 05:35 | The first value, or argument, is called the glue.
| | 05:38 | It's a character, or set of characters,
that's going to separate the values in the
| | 05:42 | array from each other. I'll type in ",".
| | 05:47 | You can use either single or double
quotes in this circumstance, and then I'll
| | 05:52 | pass in, as the second
argument, $_POST, bracket, quote, interested.
| | 06:00 | This transforms the complex array
into a string that has commas between the
| | 06:06 | values in the array.
| | 06:08 | In the circumstance where the user
hasn't selected any of the check boxes, I'll
| | 06:13 | explicitly set strInterested to a blank string.
| | 06:17 | So now, no matter what the user does
with those check boxes, the strInterested
| | 06:22 | variable will exist.
| | 06:23 | I'm just going to add a
little bit of debugging code.
| | 06:27 | After the conditional
clause, I'll use the echo command.
| | 06:32 | I'll start with a literal string of
"interested in," and then I'll append to
| | 06:37 | that strInterested.
| | 06:40 | The dot is used to append one value to another.
| | 06:43 | Then because I'm only debugging at
this point - I'm not actually doing
| | 06:46 | anything with the values -
| | 06:48 | I'll call the PHP exit function,
which terminates the processing of the
| | 06:53 | current page and will simply output to the
browser whatever I've echoed in this function.
| | 06:58 | Now I'm ready to test my form.
| | 07:00 | I'll save my changes and preview the
page in an external browser, making sure
| | 07:06 | that I copy the file
over to my server directory.
| | 07:08 | I have to fill in some minimal
information in this form to satisfy its
| | 07:13 | client-side validation rules,
| | 07:15 | so I'll type into the first name Joey,
last name will be Smith. The e-mail
| | 07:20 | will be joey@abc.com.
| | 07:23 | I also need to fill in password
information, because I have validation rules there.
| | 07:30 | Then I'll go down to the Tool Profile
section, and I'll select some random check boxes.
| | 07:37 | I'll click the Join!
button, and there's the result,
| | 07:40 | a comma delimited list of the
values that the user has selected.
| | 07:45 | So that's how you prepare a form with
multiple check boxes and then handle their
| | 07:49 | selections on the server, using
a little bit of custom PHP code.
| | 07:54 | This is an example of a
circumstance where Dreamweaver can't actually
| | 07:58 | generate the code for you, and so
understanding how to create the code in PHP
| | 08:02 | is an invaluable skill.
| | Collapse this transcript |
| Sending email with Zend_Mail| 00:00 | Once you've prepared your data
entry form, and have captured all of the
| | 00:04 | information you need from the HTML
form, you're ready to send e-mail.
| | 00:08 | There are number of ways to do this,
but my favorite approach is to use classes
| | 00:12 | in the Zend framework
| | 00:14 | that make it easy to work
with a variety of e-mail servers.
| | 00:18 | The first step, working in
Dreamweaver, is to add information about the
| | 00:21 | appropriate Zend classes to
site-specific code hinting.
| | 00:26 | That will make it a lot easier
to create the required PHP code.
| | 00:30 | Now, this exercise is dependent on
your having set up the Zend framework, and
| | 00:34 | configured it in your PHP server,
which I showed how to do in a previous
| | 00:39 | video in this series.
| | 00:41 | I'll go to the menu and choose
Site > Site-Specific Code Hints.
| | 00:45 | I'll work with my existing
Zend framework structure.
| | 00:48 | Right now, I've only included
the date classes in my structure.
| | 00:52 | I'm going to add the e-mail classes.
| | 00:54 | I'll click the Plus button. Then I'll browse.
| | 00:59 | I'll drill down to Zend, and
I'll choose the Mail folder.
| | 01:04 | The Mail folder contains everything I need:
| | 01:06 | both the Zend Mail classes, and other
dependent classes. I'll click Select.
| | 01:11 | I'll check the Recursive option, so I
make sure I include everything in that
| | 01:16 | directory and its subdirectories.
| | 01:18 | I'll add the .php extension to the structure.
| | 01:22 | Then I'll click Add.
| | 01:23 | Then I'll click OK.
| | 01:25 | Click OK again, and click Save.
| | 01:29 | Now I'll get code hinting
for my Zend mail classes.
| | 01:33 | Next, I need to include
the required class files.
| | 01:36 | I'll place the cursor after the require_
once command for explorecalifornia.php.
| | 01:42 | That's my database connection definition.
| | 01:45 | And I'll add a new PHP code block by
going to the Insert panel, to PHP, and I'll
| | 01:52 | click once on Code Block.
| | 01:54 | I'm working with an SMTP server.
| | 01:57 | Your specific requirements may differ,
and you need to know something about your
| | 02:01 | server in order to send mail correctly.
| | 02:04 | My SMTP server requires authentication.
| | 02:07 | So I'm going to need to include two classes.
| | 02:11 | I'll put in a require_once command for
the first one, and this will be a class
| | 02:15 | called Zend/Mail.php.
| | 02:19 | Then I'll add a second require_
once command, and this will refer to
| | 02:24 | Zend/Mail/Transport/Smtp.php.
| | 02:31 | Those two PHP files together will
contain everything I need to send mail.
| | 02:37 | Now I'll go down to the conditional
code, where I'm handling my form submission.
| | 02:42 | I'll place the cursor after the
conditional block and before the echo command.
| | 02:46 | I'll make some empty space.
| | 02:48 | Then I'll press F4 to
expand to fullscreen coding.
| | 02:52 | Again, I'm working with
a particular SMTP server,
| | 02:55 | so I need to provide a bunch of information.
| | 02:58 | I'll set up my configuration as an
associative array using this code.
| | 03:02 | First, I'll create a variable named config.
| | 03:05 | I'll create it as an array, with named values.
| | 03:08 | The first named value is auth,
which I'll set as the value 'login.'
| | 03:14 | Notice that I'm using equals, greater
than as the separator between the key
| | 03:19 | name and the key value.
| | 03:21 | Next, I'll set a value named port.
| | 03:23 | Your particular SMTP server
may be different than mine.
| | 03:27 | The default is 25, but my ISP, or Internet
Service Provider, requires a value of 8889.
| | 03:35 | Check with your ISP for the details.
| | 03:38 | Next, I'll enter my username.
| | 03:42 | I'll set that to my e-mail address.
And finally my password, which I'll set
| | 03:51 | to my e-mail password.
| | 03:55 | So that configuration array
contains authentication information.
| | 04:00 | Once again, check with your ISP, or
your SMTP server documentation for the
| | 04:05 | detailed information you might need.
| | 04:08 | Next, I'm going to create an instance of
a class named Zend_Mail_Transport_Smtp.
| | 04:14 | The definition for this class is in
the Smtp.php file that I already included
| | 04:19 | with the require_once command.
| | 04:22 | I'll create a variable named transport.
| | 04:25 | I'll create it as an instance of
the Zend_Mail_Transport_Smtp class.
| | 04:30 | I'll type in smtp, and show you that I
get a list of all classes that have that
| | 04:35 | string in their names.
| | 04:37 | I'll choose the last one that
shows up, Zend_Mail_Transport_Smtp,
| | 04:42 | then the DNS name of my e-mail server.
| | 04:48 | Then I'll pass in my configuration array.
| | 04:53 | Then I'll close the call to the
constructor function of that class.
| | 04:57 | I'm ready to start sending some mail.
| | 04:59 | The next step is to create a variable
that is an instance of the Zend_Mail class.
| | 05:05 | The code will look like this.
| | 05:06 | I'll name my variable mail.
| | 05:08 | I'll create it as an instance of new Zend_Mail.
| | 05:13 | When you create this object,
you don't pass in any values.
| | 05:17 | Next, I'm going to use a set of
methods or functions that create various
| | 05:22 | parts of the e-mail.
| | 05:24 | First, I'll call a function which I'll
call by typing dash, greater than, and here is a listing
| | 05:30 | of all the different functions
that are part of the Zend_Mail class.
| | 05:34 | The first one I'll call will be
setBodyText, and I'll pass in the following value:
| | 05:41 | "You are interested in," and then I'll
add a dot, and the variable strInterested
| | 05:48 | that I already created.
| | 05:49 | I'll close the function with the
closing parenthesis and a semicolon.
| | 05:54 | Next, I'll call the function setFrom.
| | 06:00 | I'll type in my e-mail address and my name.
| | 06:03 | Next, I'll call a function called addTo.
| | 06:06 | This allows me to add an e-mail address
that I want to send the e-mail to, and I
| | 06:10 | can call it as many times as I want.
| | 06:13 | The first value I'll pass in is the
actual e-mail address, which I'll get from
| | 06:18 | the data entry form, using
the syntax $_POST, then 'email.'
| | 06:25 | The second value will be the user's
full name, which I'll get from $_POST, then
| | 06:31 | bracket, 'firstname,' close bracket, then a dot, then
a space wrapped in quotes, then another dot, then
| | 06:42 | $_POST open bracket, and then in quotes 'lastname'
close quote, close bracket, close parenthesis, semicolon.
| | 06:54 | So now I've indicated where
the e-mail is going to be sent.
| | 06:58 | Next, I'll set the subject.
| | 07:00 | I'll call a function called setSubject.
| | 07:04 | I'll pass in a literal string
of 'Welcome to Explore California.'
| | 07:11 | Now I'm ready to send my e-mail.
| | 07:14 | I'll call the mail object send method,
and I'll pass in my transport object,
| | 07:20 | which is the variable, transport.
| | 07:23 | So that's all the code.
| | 07:24 | Now let's give it a try.
| | 07:26 | I'll save my changes, and I'll run the
page in the browser, making sure I copy
| | 07:31 | it over to the server.
| | 07:34 | In the form, I'll type in my name.
| | 07:36 | I'll type in my e-mail address.
| | 07:43 | I'll fill in other values
that are required by the form.
| | 07:47 | Then I'll select some tours.
| | 07:50 | I'll click the Join button, and I
should get the output that I saw before.
| | 07:55 | In a complete implementation, I would
continue processing the form, and display
| | 08:00 | a message instead of the form,
saying that the e-mail had been sent.
| | 08:04 | So that's a look at how to use the
Zend framework's e-mail capabilities.
| | 08:08 | They're much more complete than
what's included in the core PHP libraries.
| | 08:13 | You can use SMTP server authentication.
| | 08:16 | You can build complex functionality in
your PHP pages to build either text-based
| | 08:21 | e-mail, such as I've done here,
or complex, HTML-based e-mails.
| | 08:26 | Check the documentation for the Zend_
Mail class, and its related classes, which
| | 08:30 | allow you to send e-mail through
a variety of e-mail servers.
| | Collapse this transcript |
|
|
7. Managing Server-Side DataUsing data wizards| 00:00 | Dreamweaver supports a variety of
features that help you generate PHP code for
| | 00:05 | retrieving, inserting, updating,
and deleting data in a MySQL database.
| | 00:11 | In all of the videos of this chapter,
I'll work in a folder of the exercise
| | 00:15 | files area named 07_managingdata.
| | 00:18 | If you're working with the exercise
files, set your site definition to point to
| | 00:23 | this as the root folder.
| | 00:25 | I'm going to start by showing you how
to use one of the data wizards that's
| | 00:29 | included with Dreamweaver CS5.
| | 00:31 | These wizards are very easy to use
and work very quickly, but they may not
| | 00:36 | always be modifiable for your own site.
| | 00:39 | First, I'm going to check to make sure that
my database connection is set up correctly.
| | 00:44 | I'll open any PHP file.
| | 00:46 | I'll select index.php from the Home folder.
| | 00:49 | Then I'll go to the Databases panel,
and I'll double-click explorecalifornia.
| | 00:54 | If you're working on Windows with
WampServer, the settings should already be correct.
| | 00:59 | If you're working with MAMP on Mac OS
X, click into the Password entry and
| | 01:04 | type "root," and then regardless of which
operating system you're working on, click Test.
| | 01:10 | If you're working on Windows,
you might see this message.
| | 01:14 | If so, click OK, and then click Test again.
| | 01:18 | And then regardless of whether you're
working on Mac or Windows, you should see
| | 01:21 | the message that the
connection was made successfully.
| | 01:24 | Click OK and click OK again.
| | 01:27 | Now you're ready to create a web
page using one of the data wizards.
| | 01:32 | Create a new page based on the page type PHP.
| | 01:37 | Set the Layout to none and click Create,
and then save the file into your site's
| | 01:42 | Home folder, and name it
insertfromwizard.php, and click Save.
| | 01:49 | Then look at the page in Design View.
| | 01:52 | I'm going to add a data entry form
that primarily uses text boxes, but has
| | 01:57 | one pulldown list, or select control, that
uses data from the states table of my database.
| | 02:03 | So before using the wizard, I'll
add a recordset for that table.
| | 02:08 | I'll go to the Bindings panel and
click Plus and select Recordset.
| | 02:13 | If you see the advanced Recordset
dialog appear, click the Simple button, and
| | 02:17 | you should see this display.
| | 02:19 | Give the new recordset a name of rsStates.
| | 02:23 | The Connection should be set to
explorecalifornia, and then set the Table to states.
| | 02:29 | You'll be selecting both
columns of the states Table:
| | 02:31 | stateId and stateName.
| | 02:33 | Set the Sort value to stateName, click
Test, and it should show you a list of
| | 02:40 | the first 25 records from the states table.
| | 02:43 | Click OK and click OK again.
| | 02:47 | Now you're ready to use a
wizard to add a data entry form.
| | 02:51 | Go to the menu and choose Insert,
choose Data Objects, and you'll see three
| | 02:57 | items named Insert Record,
Update Record, and Delete Record.
| | 03:02 | Choose Insert Record and then
Record Insertion Form Wizard.
| | 03:07 | Once again, you're asked which table
you want to work with. Choose explorers.
| | 03:12 | Next you're asked which page you want to
navigate to after the data entry form is finished.
| | 03:18 | Click the Browse button, and make
sure that you're in the correct folder,
| | 03:24 | starting from 07_managingdata.
| | 03:28 | From there, go down to the explorers
folder and choose explorerlist.php.
| | 03:34 | You'll see that Dreamweaver
sets that up as a relative address.
| | 03:39 | Because your form file is in the
root folder, you'll be navigating to
| | 03:42 | explorerlist.php in the explorers folder.
| | 03:46 | Now you're asked which form
fields you want to display.
| | 03:50 | You don't want to show the primary key column.
| | 03:52 | MySQL will add the value for that.
| | 03:55 | So click explorerId and then click
minus, and that removes that column from
| | 04:00 | the data entry form.
| | 04:01 | Next, scroll down a bit and
click on the state column.
| | 04:05 | Display that as a menu, rather than a text field.
| | 04:09 | Then click Menu Properties.
| | 04:12 | I'm going to display the values from
the database query, the recordset that I
| | 04:15 | already added to this page.
| | 04:17 | So I'll choose From database, and
I'll see the recordset rsStates appear,
| | 04:22 | it's the only recordset in this page,
and I'll indicate that I want to get the
| | 04:26 | labels from the stateName column, and
I'll click OK, and that takes me back to
| | 04:31 | the Record Insertion Form
Wizard, and I'll click OK again.
| | 04:35 | There is my data entry form.
| | 04:37 | I'm going to test the form.
| | 04:39 | I'll save the file and
then view it in a browser.
| | 04:43 | If you see the dialogs asking whether
you want to copy the files to the server,
| | 04:47 | indicate that you do.
| | 04:49 | Once the form opens, make sure you
type values into every text field.
| | 04:54 | I'll set the FirstName as
Joey, the LastName as Adams.
| | 05:00 | Make sure that you enter a valid
date for the Dob, or date of birth.
| | 05:04 | I'll enter a value of 2007.
| | 05:07 | You can add any e-mail address, and
then any address value, and any city.
| | 05:14 | Set the Zipcode, UserName, and
Password to any values you want.
| | 05:21 | Then click Insert record.
| | 05:23 | After the data entry form
functionality is complete, you'll see that the new
| | 05:28 | data is listed in the explorerlist page,
but you might notice an issue, that the
| | 05:33 | Birthdate is displayed in an odd way.
| | 05:36 | I entered a valid date, but it's
being displayed as a value of 11/30/99.
| | 05:41 | To investigate that, I'll go to phpMyAdmin
and look directly at the database contents.
| | 05:48 | I'll go to the explorecalifornia database,
to the explorers table, and I'll show
| | 05:52 | you that all the values that I entered
into the form are in the database, but
| | 05:57 | that the Dob was entered incorrectly.
| | 06:00 | One of the challenges with using
Dreamweaver's automatic PHP code-generation is
| | 06:04 | that it isn't entirely up to date with
the requirements of the MySQL database.
| | 06:09 | So in the next video, I'm going to
show you how to correct this issue by
| | 06:13 | writing a little bit of custom PHP
code and customizing the code that's
| | 06:18 | generated by Dreamweaver.
| | Collapse this transcript |
| Formatting dates for SQL| 00:00 | In a previous video, I described how
to use the Record Insertion Wizard to
| | 00:05 | create a data entry form that would
collect information from the user and add
| | 00:09 | it to the MySQL database, but I showed that
there is a challenge with working with dates.
| | 00:15 | That's because the code that's created
by Dreamweaver doesn't do an adequate job
| | 00:19 | of formatting dates as
they're expected by MySQL.
| | 00:23 | I'm working in the file,
insertfromwizard2.php, in the root folder of the current site.
| | 00:30 | Here is the problem code.
| | 00:32 | It starts with a case
statement, and it's within a function
| | 00:35 | named GetSQLValueString.
| | 00:38 | The case statement for dates assumes
that the user has typed in a value in a
| | 00:43 | format that's acceptable to MySQL.
| | 00:46 | Clearly, that isn't always the case.
| | 00:48 | So I'm going to replace this string
with a little bit more complex PHP code
| | 00:53 | that uses the Zend_Date class that
I've demonstrated in previous videos.
| | 00:58 | I'll go to the top of the file and add a
require_once command to incorporate the
| | 01:04 | Zend_Date class into my page.
| | 01:07 | I'll add a PHP code block and then
the require_once command and then
| | 01:12 | the Zend/Date.php file.
| | 01:15 | Make sure you complete the
PHP code block at this point.
| | 01:20 | Then go down to the offending code.
| | 01:22 | Here is the line of code I need to replace.
| | 01:25 | I'm going to select and delete it, and then
I'll replace it with a complete if else statement.
| | 01:31 | I'll start by creating the entire
conditional logic, with if and a pair of
| | 01:36 | parentheses, and a pair of braces, and
then an else, and another pair of braces.
| | 01:44 | Then I'll go back to the parentheses after
the if and add the condition I'm examining.
| | 01:49 | I'm asking the question, did
the user type in a value at all?
| | 01:53 | I'll enter $theValue and then the
equality operator, double equals, and then
| | 02:00 | quote, quote, meaning blank string,
| | 02:02 | Dreamweaver's syntax checking now
shows me that there are no syntax errors.
| | 02:07 | I now have a complete conditional block.
| | 02:10 | If the value that the user typed in is
blank, I'm going to set it to a value of
| | 02:14 | null, using a very simple assignment
statement of theValue =, and then the word
| | 02:19 | "NULL" in uppercase.
| | 02:22 | In the else clause, I'm going to assume
that the user typed in a value formatted
| | 02:26 | as a date, in the format month/day/year,
and eventually I'll add validation rules
| | 02:33 | into my data entry form that ensures
the value is typed in in this format.
| | 02:38 | I'll take the value the user typed
in and turn it into an instance of
| | 02:42 | the Zend_Date class.
| | 02:44 | I'll create a variable called zendDate,
and I'll create it from a new instance
| | 02:48 | of the Zend_Date class, and the first
value that I'll pass in is the value that
| | 02:53 | the user typed in in the form, theValue.
| | 02:56 | The second part is the
format that I'm expecting.
| | 03:00 | I'll type that in as a literal string,
using quote, an uppercase M for the
| | 03:06 | Month, then a slash, then a lowercase d
for the date as a number, then a slash,
| | 03:12 | and then four ys for the year.
| | 03:15 | I now have an instance of the Zend_Date
class, representing the value the user typed in.
| | 03:20 | I can format it any way I want.
| | 03:23 | I'll create a new line of code, and I'll
replace the variable of theValue using
| | 03:28 | a single quote, a formatted
date, and another single quote.
| | 03:32 | I'll start with a single quote
wrapped in double quotes, then a period,
| | 03:36 | indicating that I'm going to
concatenate, or append another value.
| | 03:40 | Then I'll call the
zendDate objects to string method.
| | 03:45 | I'll pass in a formatting string,
indicating the formatting that's expected by MySQL.
| | 03:51 | In double quotes, it will look like
this: yyyy for a four-digit year, then a
| | 03:57 | dash, then MM in uppercase, then a dash,
then dd in lowercase for the day, and
| | 04:04 | finally, I'll concatenate
another single quote at the end.
| | 04:08 | So now I have a formatted date
string wrapped in single quotes.
| | 04:12 | That's the extent of the
changes to my data entry form's code.
| | 04:16 | I'll save my changes and then
run the form in the browser.
| | 04:21 | I'll type in some values.
| | 04:23 | The FirstName will be Mikey, then Jones.
| | 04:26 | Make sure that you type in a valid
date of birth in the common format used
| | 04:30 | in the United States.
| | 04:32 | I'll type in a value of 5/12/1963, type
in any e-mail address, and then type in
| | 04:42 | any other values you like
in the rest of the form.
| | 04:45 | Because of certain restrictions in
the database structure, you must type in
| | 04:49 | values into all of these form controls.
| | 04:54 | Once you've typed in all of
the values, click Insert record.
| | 04:57 | You should go directly to the
explorerlist page and see that this time the date
| | 05:02 | was entered correctly.
| | 05:04 | Here is my new record, and the date is
displayed, formatted by the Zend_Date class.
| | 05:09 | So that's a look at how to customize
your data entry forms after Dreamweaver
| | 05:14 | has generated the code.
| | 05:15 | This strategy can be used both for code
that's generated by the Record Insertion
| | 05:19 | Wizard and for code that's added to
existing forms, which I'll show you how to
| | 05:24 | build in another video.
| | Collapse this transcript |
| Creating a custom data entry form | 00:00 | In previous videos, I described how to
use the Record Insertion Wizard to create
| | 00:05 | an entire data entry form and send
the data collected from the user to the
| | 00:09 | server-side database.
| | 00:11 | I also showed that there are
issues with the sort of code the
| | 00:14 | Dreamweaver generates.
| | 00:15 | Most importantly, the data entry form is
designed using HTML tables in old-style
| | 00:21 | HTML architecture, but you can also use
Dreamweaver to generate similar server
| | 00:26 | behaviors and attach them
to your own custom forms.
| | 00:30 | For this demonstration, I'm going to
use a custom form that I've created in the
| | 00:35 | file explorerinsert.php.
| | 00:38 | You'll find it in the explorers
folder, under the current site root.
| | 00:43 | This file is built with
Cascading Style Sheets and XHTML.
| | 00:47 | Let's take a look at the code structure.
| | 00:51 | Each of the input controls that collects
data from the user is represented by an
| | 00:55 | input tag. The input tag has an
associated label, and all of the labels and
| | 01:00 | inputs taken together are
inside a fieldset tag set.
| | 01:05 | This represents the most modern
approach to building data entry forms - not
| | 01:09 | relying on HTML tables, but instead
on Cascading Style Sheets to format and
| | 01:14 | place objects on the screen.
| | 01:16 | I'm also using Spry validation components.
| | 01:20 | I have one text field for the first name,
one for the last name, and two others
| | 01:25 | for the date of birth and e-mail.
| | 01:26 | I'll look at the file in
Design View and click on each of the
| | 01:31 | validation components.
| | 01:33 | The first name and last name only have
required validations. The Date of Birth
| | 01:39 | validation has the date type, and the
Email validation has the e-mail type.
| | 01:45 | I'm going to add one more validation.
| | 01:48 | The select control for the state
column has a single static option with the
| | 01:53 | text "Select a State," but if I look in
the dynamic setting, it shows that it's
| | 01:58 | filling in the rest of the
options from a dynamic record set.
| | 02:02 | This is the data coming from the MySQL database.
| | 02:06 | I'll go to the State field and click it,
and then go to the Insert panel, to the
| | 02:11 | Spry category, and I'll locate
and click Spry Validation Select.
| | 02:16 | That adds client-side validation
wrapped around the select control.
| | 02:21 | With the Spry validator selected, I'll
go to the Properties panel and give this
| | 02:25 | a custom name of sprystate, and then to
match the behavior with all the existing
| | 02:32 | form controls, I'll indicate that I
want to validate on blur, meaning that if
| | 02:37 | the user pulls down the list but
doesn't actually make a selection, they'll see
| | 02:41 | a validation message immediately.
| | 02:43 | I'll save and run the
file in the external browser.
| | 02:47 | If you see messages asking you to copy
the file over to the server, say Yes.
| | 02:52 | Next, I'll click Submit, and I'll
show that all of the validators display
| | 02:56 | their messages correctly, but you'll also see
that the field set changes its width dynamically.
| | 03:03 | If you don't want that to happen, you
can fix the field set's width by simply
| | 03:07 | applying a new Cascading Style Sheet rule.
| | 03:09 | I'll close the browser
and return to Dreamweaver.
| | 03:13 | Then I'll click on the fieldset object.
Take a look in the Tag Selector, and
| | 03:18 | you'll see that the fieldset is selected.
| | 03:21 | Then I'll go to the CSS Styles, and
I'll make sure that I've selected form.css.
| | 03:26 | Notice that I've clicked
the All button at the top.
| | 03:29 | This indicates that the rule that I'm about
to create will go into this external file.
| | 03:34 | Then I'll click the Plus button to
create a new CSS rule, and I'll see a complex
| | 03:39 | descendent selector that
Dreamweaver has generated.
| | 03:42 | I'm going to make the selector less
specific, because I want to apply this
| | 03:46 | selector to any object with this ID regardless
of where it is in my file, and I'll click OK.
| | 03:53 | And in the CSS rule definition dialog box,
I'll go to the Box category, and I'll
| | 03:59 | set the width of the object
at 450 pixels and click OK.
| | 04:05 | I'll save all my changes, and once
again run the page in the browser.
| | 04:11 | And now my data entry form has a
fixed width from the beginning.
| | 04:15 | When I click the Submit button, I still
see all of my validation messages, but
| | 04:20 | the width of the container
doesn't change at runtime.
| | 04:24 | So in this video, I've shown you a
couple of steps you might want to go through
| | 04:27 | in preparing your form for
receiving data and sending it to the server.
| | 04:32 | You can use whatever XHTML and
Cascading Style Sheet techniques you prefer to
| | 04:38 | create the look and feel of your data
entry form, and most particularly, you can
| | 04:42 | design the form ahead of time to
display any validation messages without
| | 04:46 | dynamically changing its dimensions at runtime.
| | Collapse this transcript |
| Preparing a database table for server behaviors| 00:00 | After preparing your custom forms for
data management, the next step is to make
| | 00:05 | sure your database structure
matches the requirements of your forms.
| | 00:09 | I'm going to go to phpMyAdmin for this step.
| | 00:12 | If you're working with WampServer, open
the Administration menu from the system
| | 00:16 | tray icon and choose phpMyAdmin.
| | 00:20 | If you're working with MAMP on
Mac OS X, go to the MAMP homepage and click
| | 00:25 | phpMyAdmin from there.
| | 00:26 | Then go to the explorecalifornia
database and from there, to the explorers table.
| | 00:33 | Then click Structure, at the top.
| | 00:36 | This screen shows you everything you need
to know about the structure of your database.
| | 00:41 | For variable character fields,
it'll show you how wide the fields are.
| | 00:45 | It'll show you what data types are being used,
| | 00:48 | for instance, the dob column is a
date field, and most importantly for this
| | 00:52 | exercise, it will show you which
columns you can leave null, or empty, and which
| | 00:57 | columns require values.
| | 00:59 | It's very common for there to be
mismatches between the database structure and
| | 01:04 | the requirements of a data entry form.
| | 01:06 | I'm going to go back to a form that
I've shown already, explorerinsert.php in
| | 01:11 | the explorers folder.
| | 01:13 | This form contains only a certain
number of controls for the various columns.
| | 01:18 | There are controls for first name,
last name, date of birth or dob, e-mail,
| | 01:24 | address, city, and state.
| | 01:26 | But there aren't controls for any of the
others, and this can cause a problem in
| | 01:30 | a database table that requires values.
| | 01:33 | For example, these three columns,
username, password, and tours, have their null
| | 01:38 | property set to No, meaning
that you can't leave them blank.
| | 01:43 | Similarly, the city column is set to No,
and the e-mail column is set to No.
| | 01:47 | If you don't apply validation in the form,
you need to match up the requirements
| | 01:52 | of your data entry form to the
requirements of your database.
| | 01:56 | So I'll show you how to make this
adjustment in the three columns that can be
| | 01:59 | affected by my particular data entry form.
| | 02:02 | I'll go to the username column, and I'll
click the Pencil icon to change it, and
| | 02:08 | I'll select the Null option, meaning
that that column can be set to Null, and I'll
| | 02:13 | save it, and I'll repeat that process,
first for the password, and then for tours.
| | 02:23 | Just to be on the safe side, you can
go through and do exactly the same thing
| | 02:27 | for the e-mail address and for the city.
| | 02:34 | I'm going to leave the firstname and
lastname set to No, meaning they can't be left null.
| | 02:39 | And the one column that you must
leave set to No is the explorerId.
| | 02:44 | A primary key column must contain a value;
| | 02:48 | there are no exceptions to this rule.
| | 02:50 | So once you've set your database
structure and matched it up to the requirements
| | 02:54 | of your data entry form, you're ready
to apply a server behavior to the data
| | 02:58 | entry form to insert or update data.
| | Collapse this transcript |
| Using the Insert Record server behavior | 00:00 | Once you've created a data entry form
using your own custom HTML and Cascading
| | 00:04 | Style Sheets, and prepared your
database table to receive inserts, you can then
| | 00:10 | apply a server behavior to the form.
| | 00:12 | The server behavior creates all of the
PHP code you need to collect the data
| | 00:16 | from the form and send it to the server.
| | 00:18 | I am working in the file
explorers/explorerinsert2.php.
| | 00:25 | This version of the form already
has all of the data validation I need.
| | 00:28 | I will show the form in the
browser and show you its behavior.
| | 00:32 | When I click the Submit button, I get
validation messages on all of the relevant
| | 00:36 | text fields and also on
the State Select control.
| | 00:41 | I'll go back to Dreamweaver and
then open the Server Behaviors panel.
| | 00:46 | If you don't see Server Behaviors on the
right, as it is in my setup, you can go
| | 00:50 | to the menu and choose
Window > Server Behaviors.
| | 00:55 | In the Server Behaviors panel, I'll click
the Plus button and then choose Insert Record.
| | 01:01 | In the Insert Record wizard, I am asked for
the form that I'm going to collect data from.
| | 01:05 | There is only one form in this page,
and it has a name of explorerForm; the
| | 01:10 | database connection, and again there is
only one explorecalifornia; and then the
| | 01:15 | table into which I want to insert data.
| | 01:17 | I'll choose the explorers table.
| | 01:21 | Just as when using the Insert Record
wizard, Dreamweaver detects the database
| | 01:26 | structure and figures out dynamically
what data types will be used in formatting
| | 01:31 | data to add to the database.
| | 01:33 | Most of these columns are simple text
columns, but the DOB is a date column in
| | 01:38 | the database table, and so it's going
to be formatted as a date in my PHP code.
| | 01:43 | Also, just like the wizard, I am asked
which page I want to browse to after the
| | 01:47 | Insert operation is done.
| | 01:48 | I will click the Browse button.
| | 01:51 | I'll make sure I am in the explorers
folder in my current site, and I'll choose
| | 01:56 | explorerlist.php and click OK.
| | 02:00 | In a previous video, I described one
issue that happens with the generated PHP
| | 02:05 | code from Dreamweaver.
| | 02:07 | When you're working with date
values, Dreamweaver isn't very good at
| | 02:10 | formatting the date as needed for MySQL,
and I showed you in that video how to
| | 02:16 | write a little bit of custom PHP code
that would collect the data correctly
| | 02:20 | and format it for MySQL.
| | 02:22 | Now I am going to show you how to
create that code in a reusable form.
| | 02:27 | In the _includes folder, I've
created a file named formfunction.php.
| | 02:33 | The folder is _includes under the site
root, and I have made a copy of two parts
| | 02:38 | of the PHP code for my previous exercise.
| | 02:42 | I have a require_once command that
includes the Zend library's date class, and I
| | 02:48 | have also included a copy of the
GetSQLValueString function, and in the case for
| | 02:54 | the date type, I've added the custom
code that retrieves the data expecting the
| | 02:59 | format that the users has to type in:
| | 03:01 | month, day and year, and
reformated it as required by MySQL.
| | 03:05 | Here is how I will use that file in the
generated PHP code in my data entry form.
| | 03:12 | I will return to the file
explorerinsert2.php and go to Code View, and up at the
| | 03:18 | top, after the require_once command
for the connection, I'll add another PHP
| | 03:24 | code block and another require_once
command. And I'll include that file
| | 03:28 | formfunctions.php, using the relative
address ../_includes/formfunctions.php.
| | 03:40 | I'll close the name of the file, the
require_once command, add the semicolon and
| | 03:45 | close the PHP code block.
| | 03:47 | Now in my newly generated code in
this file, I have another version of the
| | 03:51 | GetSQLValueString function.
| | 03:54 | I don't need to remove that function
definition because it's wrapped inside this
| | 03:58 | conditional block, asking
whether the function already exists.
| | 04:02 | Because I've now included the
version from the formfunctions file, this
| | 04:06 | definition will be ignored, and the
version that has the correct date formatting
| | 04:11 | will be used at runtime.
| | 04:13 | I'm ready to test my form.
| | 04:14 | I'll save my changes and run
the page in an external browser.
| | 04:19 | If you're prompted to copy
files to the server, say yes.
| | 04:22 | I'll type in some names.
| | 04:23 | I'll type in a date of birth
using the required date format.
| | 04:26 | I'll use 6/23/2009.
| | 04:31 | I'll add an e-mail address.
| | 04:35 | I'll ignore the Address and City this
time, because the form doesn't require
| | 04:39 | them to be entered, and I have set up
my database now so that they can be left
| | 04:43 | blank, and I will choose a State.
| | 04:45 | Then I will click Submit, and I'll be
taken back to my list page, and I'll show
| | 04:50 | you that the date was entered
correctly because of the revised and customized
| | 04:55 | date formatting in my PHP code that
was included from that separate file.
| | 05:00 | So in this video, I have shown you how
to use the server behavior for inserting
| | 05:04 | a record and apply it to
an existing data entry form.
| | 05:09 | I've also shown you how to handle the
special case of date formatting to allow
| | 05:13 | the user to type in a date
value in whatever format you choose.
| | 05:18 | You simply need to match the format of
the date as expected when you create your
| | 05:22 | Zend date object and match it to
the validation rule in your form.
| | 05:29 | Then you format the date
correctly, as expected by MySQL.
| | 05:33 | The result is a very simple data
entry form that collects the data from the
| | 05:36 | user, formats it correctly, and
then sends it to your MySQL database.
| | Collapse this transcript |
| Preparing an update form| 00:00 | Just as with inserting data into a
database, you can create a data entry form to
| | 00:05 | update data using Dreamweaver's
update record server behavior.
| | 00:10 | Before you use the server behavior
though, you need to prepare the form to
| | 00:13 | display data from a single
record that the user wants to update.
| | 00:16 | I'll be working in the file explorerupdate.
php, in the Explorers folder of my site root.
| | 00:23 | The first step is to add a binding, or
recordset to the form, to retrieve a
| | 00:27 | single record from the database table.
| | 00:29 | I'll go to the Bindings panel and
click plus and choose Recordset or Query.
| | 00:35 | I'll give my recordset a name of rsExplorer.
| | 00:39 | Notice I am using the singular
version of Explorer, rather than the plural
| | 00:43 | version, because I am only going to
retrieve the single record, filtered by the
| | 00:47 | primary key of the table.
| | 00:48 | Then I'll choose the Explorers table.
I'll click Selected, and then holding down
| | 00:54 | Ctrl on Windows or Command on Mac,
I'll select only the fields that I want to
| | 00:58 | display in the form:
| | 01:00 | the explorerId, firstName, lastName,
dob, email, address, and make sure that
| | 01:08 | I've also selected the state.
| | 01:10 | I am going to filter.
| | 01:11 | I'll pull down the list of
available columns and choose the primary key
| | 01:15 | column for this table, explorerId.
| | 01:18 | The default SQL statement will be
designed to retrieve a single record,
| | 01:22 | filtered on the primary key column,
explorerId, looking for a URL parameter,
| | 01:28 | known in PHP as a Get variable, and by
default, the name of the variable will
| | 01:33 | be the same as the column name;, explorerId.
| | 01:36 | I'll click the Test button and
provide a test value for the primary key.
| | 01:41 | I'll provide a value of 1.
| | 01:44 | I'll click OK, and I'll see that I've
retrieved all of the columns I need to
| | 01:48 | fill in my data entry form.
| | 01:51 | I'll click OK, and click OK again,
and that adds the SQL statement or
| | 01:56 | recordset to the form page.
| | 01:58 | I'll add information to the form
controls to cause them to display the values
| | 02:03 | from the retrieved record.
| | 02:05 | I'll start with the First Name column.
| | 02:07 | I'll click on the text field and
then go down to the Properties panel.
| | 02:11 | I'll click the Bind to Dynamic Source button,
| | 02:14 | the lightning bolt for that column, and I'll
choose the matching column in the database,
| | 02:19 | the First Name column in the
rsExplorer Recordset, and click OK.
| | 02:25 | I'll do the same thing for
each of the other text fields:
| | 02:28 | The Last Name, and Date of Birth, the
Email address, the Address, and the City.
| | 02:43 | If for any reason I've forgotten one of
the columns, as I have here, I can cancel
| | 02:47 | out, go back to the Bindings panel,
double-click on the recordset to reopen it,
| | 02:53 | and then, holding down the Ctrl key, I
can select the column that I missed.
| | 02:58 | Make sure you're holding down Ctrl on
Windows or Command on Mac when you do the
| | 03:02 | click; otherwise, you will
deselect everything else.
| | 03:04 | I'll click OK, and that
updates the recordset in the page.
| | 03:09 | Go back to the City field, and once
again click the Bind to Dynamic Source
| | 03:14 | button, and now I should be
able to choose the City column.
| | 03:19 | You can also set the current
value for a select control.
| | 03:23 | I'll click on the State select control,
and I'll go to the Properties panel and
| | 03:27 | click Dynamic. And then for set value
equal to, I'll click the lightning bolt
| | 03:32 | button, and I'll choose
the matching column, state.
| | 03:35 | I'll click OK and click OK again, and
now my data entry form will match whatever
| | 03:42 | value is passed to it when the file opens.
| | 03:45 | There is one more column
though, that you need to account for.
| | 03:48 | When you're working with an HTML data
entry form for managing data, you have to
| | 03:52 | pass the primary key value of the
current record from the form to the action,
| | 03:58 | that is to the page that's going
to process the request by the user.
| | 04:02 | You do this with a hidden data entry form field.
| | 04:05 | I'll click right after the Submit
button in the form, then I'll switch to Code
| | 04:09 | View, and I'll check the location of the cursor.
| | 04:13 | You need to make sure that
the cursor is inside the form.
| | 04:16 | A hidden field won't affect the
appearance of the form at all, but if it's
| | 04:20 | placed say outside the form, where I
have placed the cursor now, the value won't
| | 04:24 | be passed from form to action.
| | 04:26 | So I'll place the cursor right before
the ending form tag. Then I'll go to the
| | 04:30 | Insert panel and choose Forms,
and I'll add a hidden field.
| | 04:36 | Because I'm in Code View, I
get the Tag Editor Dialog box.
| | 04:40 | I'll click OK, then go back to Design
View and show you that the hidden form
| | 04:45 | field is displayed by
this icon in the upper-right.
| | 04:48 | Again, don't worry about its visual
appearance, or its placement on the screen;
| | 04:52 | because it's hidden,
it will be invisible to the user.
| | 04:55 | I'll select the Hidden Field that
I created, then I'll click into the
| | 04:59 | Properties panel, and I'll assign the
name matching the name of the database
| | 05:03 | column for the primary key, explorerId.
| | 05:07 | Don't worry about the case.
| | 05:09 | It doesn't matter whether it's
uppercase, lowercase, or mixed case.
| | 05:13 | It just has to match the name of
the database column in the table.
| | 05:17 | Then I'll go to the value, and just as I
did with the text fields, I'll click the
| | 05:22 | Dynamic button, and I'll match this
controls value to the explorerId column in
| | 05:27 | the recordset, and I'll click OK.
| | 05:31 | If you save and test the form at
this point, it won't be quite right.
| | 05:34 | I'll click and preview,
| | 05:38 | and you'll see that the form is
displayed with nothing in it. Here is why.
| | 05:42 | Let's take a look at the generated code.
| | 05:44 | I'll go to the Code View, and then
I'm going to press Ctrl+F on Windows or
| | 05:49 | Command+F on Mac, and I am
going to search for rsExplorer.
| | 05:52 | I'll click Find Next, and you'll
see that you may not get to the actual
| | 05:57 | definition of the recordset. But if you
click Find All, you'll get a listing of
| | 06:01 | all references, and here is
the code I am looking for.
| | 06:05 | There is a variable that's generated by
Dreamweaver called colname_rsExplorer,
| | 06:10 | which is set to a default of -1.
| | 06:13 | In the Search panel, I'll double-click
on that bit of code, and that takes me to
| | 06:16 | line 40 in my page, where the value is being set.
| | 06:21 | This is the default primary key value
for the record that will be displayed in
| | 06:25 | the form. Because I am not connecting
this page to the rest of my data entry or
| | 06:29 | data management system yet, I'm just
going to change this value so that I am
| | 06:34 | displaying the data from
the first record in the table.
| | 06:38 | I'll change the default value of the
primary key column from -1, which
| | 06:42 | means I am not retrieving anything, to 1,
which means I am retrieving the record
| | 06:46 | with that primary key value.
| | 06:49 | I'll save my change, and then I'll
preview the page in the browser, and now I
| | 06:54 | see the data from the record
with a primary key value of 1.
| | 06:59 | There is one more step to follow,
which is updating the date format, and I'll
| | 07:02 | show you how to do that in another video.
| | Collapse this transcript |
| Using the Update Form behavior | 00:00 | Once you've prepared you data entry
form, you can apply a server behavior to
| | 00:04 | it, to collect the data from the
form, and then update a record in the
| | 00:08 | server-side database table.
| | 00:10 | For this exercise, I'll use the file
explorerupdate2.php in the explorers
| | 00:15 | folder of the site root.
| | 00:17 | This page is designed to retrieve a
single record from the database table and
| | 00:21 | display it in the browser.
| | 00:24 | The user can make changes to the data
and click Submit, and the data should then
| | 00:28 | be sent to the server.
| | 00:29 | There is a problem with this form, though.
| | 00:32 | When I click the Submit button, I get an
Invalid Format message on the date, and
| | 00:37 | that's because this data entry form is
designed to validate the date and look
| | 00:41 | for it in the format of month/day/year.
| | 00:42 | So we have to reformat that value
before we present it in the form.
| | 00:49 | I'll close the browser and return
to Dreamweaver, and go to Code view.
| | 00:56 | Now, in the previous exercise, I
showed you a file that's a part of the
| | 01:00 | _includes folder, named formfunctions.php.
| | 01:04 | This file has a require_once that
includes the Date class from Zend framework.
| | 01:09 | And then down at the bottom it has
a function we're now going to use,
| | 01:13 | called dbDateToFormDate.
| | 01:15 | It accepts a single variable, named
formDate, casts it in a Zend_Date object, and
| | 01:22 | then reformats it and returns it in
the form of month/day/4-digit year.
| | 01:28 | I am going to use this function so
I can format the value correctly.
| | 01:34 | I'll use this function in my form page.
| | 01:36 | I'll go to the form and scroll all the
way up to the top, I'll place the cursor
| | 01:41 | after the PHP require_once command for
the database connection, and I'll add
| | 01:46 | another PHP code block.
| | 01:49 | Within the code block I'll add a require
_once function call, and I'll call the
| | 01:54 | file ../_includes/formfunctions.php.
| | 02:02 | So now, the two functions that are
in that file, the correct version of
| | 02:06 | GetSQLValueString and the function that
I am going to use to format the date in
| | 02:11 | the form, are both available to this page.
| | 02:14 | Now I'll go to Design View, and
I'll go to the Date of Birth field.
| | 02:18 | I'll click it and then go to Code View,
and this helps me find the code I am
| | 02:24 | looking for in the code.
| | 02:26 | I'll go to fullscreen and then
in order to present the date in the
| | 02:30 | correct format, I'll go to the PHP command
that's outputting the value in the form control.
| | 02:36 | This is the expression that's being
output now, the DOB column in its raw form.
| | 02:41 | I am going to wrap that expression inside my
custom function that's in the included file.
| | 02:48 | It looks like this.
| | 02:49 | I'll start with dbdate. Then I'll press
Ctrl+Spacebar and using Dreamweaver's
| | 02:54 | code hinting, I'll select the
correct function name, dbDateToFormDate.
| | 03:00 | Then I'll place the cursor after the
expression - that retrieves the data from the
| | 03:03 | database - and I'll add a closing parenthesis.
| | 03:08 | I should now see that there are
no syntax errors in my PHP code.
| | 03:12 | I'll save and run the page in the browser.
| | 03:16 | And now the date is formatted as the
form expects it to be and also as the
| | 03:21 | function expects it to be
in order to cast it to MySQL.
| | 03:25 | Now I am ready to apply the server behavior.
| | 03:27 | I'll go back to Dreamweaver to
Design View, and I'll look at my panels by
| | 03:33 | pressing the F4 key.
| | 03:34 | I'll go to Server Behaviors, I'll click the
Plus button, and I'll choose Update Record.
| | 03:42 | I'll check the values in the first two
items. I am submitting the values from
| | 03:45 | the only form in the page, explorer form,
and I am using the explorecalifornia
| | 03:50 | database connection.
| | 03:52 | I'll pull down the list of tables and
choose explorers, as before, and then I'll
| | 03:59 | check all of the mappings of form
controls to database table columns.
| | 04:04 | For example, the explorerId form
control, the hidden control, is used to
| | 04:09 | select the record to update, and all
of the other table columns get their
| | 04:13 | values from various controls.
| | 04:15 | Dreamweaver matches this all up
automatically because I have matched the names
| | 04:19 | of my form controls to the
names of the database columns.
| | 04:23 | If you haven't matched them in the
same way, you can still use the server
| | 04:27 | behavior by manually matching
the columns to your form controls.
| | 04:32 | As with other server behaviors and
wizards that I've shown in this chapter, you
| | 04:37 | can also tell Dreamweaver to set up code
to go back to a particular page after
| | 04:42 | the update operation is done.
| | 04:44 | I'll click Browse, and I'll
choose explorerlist.php and click OK.
| | 04:50 | I am ready to test the Update feature.
| | 04:53 | I'll save my changes, and I'll run the
page, and I see that the First Name is
| | 05:00 | Jackie and the Last Name is Smith.
| | 05:01 | I am going to change the Last Name from
Smith to Jones, and I'll change the Date
| | 05:06 | of Birth from 7/10/1985 to 7/10/1981.
| | 05:11 | I'll change the Email address from
jackiesmith to jackiejones, and you can make
| | 05:15 | other changes if you like.
| | 05:17 | I'll click Submit, and I'll see that I
go back to the explorerlist page, and the
| | 05:23 | Jackie Jones record has been correctly updated.
| | 05:25 | So that's a look at how to prepare a
data entry form for use with an update
| | 05:30 | operation and how to apply the
Dreamweaver update record server behavior to
| | 05:35 | minimize the amount of hand coding
you have to do of PHP, and also how to
| | 05:40 | integrate features of the Zend
framework to make it easier to format your
| | 05:44 | date values.
| | Collapse this transcript |
| Creating list page links to edit and update data| 00:00 | Once you've created a list page and
data entry forms for inserting and updating
| | 00:04 | data, you can then tie the whole thing
together by adding hyperlinks to the list page.
| | 00:09 | The user will be able to click
the links to navigate to the forms.
| | 00:13 | I'll start this demonstation in
the file explorerlist.php, in the
| | 00:17 | explorers folder of the site.
| | 00:19 | Looking at the file in Design View,
I'll click on the Live View button and show
| | 00:24 | that the page is successfully
retrieving and displaying data from MySQL.
| | 00:29 | I'll exit Live View and then click to
the right of the HTML table, and I'll
| | 00:34 | press Enter or Return to create a new paragraph.
| | 00:37 | Then I'll type some text that the
user will be able to click on to navigate
| | 00:41 | to the insert form.
| | 00:42 | I'll type the text Insert New Explorer.
| | 00:45 | Then I'll select that new text
and go to the Properties panel.
| | 00:48 | I'll make sure that the HTML category
is selected and then I'll create the
| | 00:53 | hyperlink using either the Point to
File or the Browse for File tools.
| | 00:58 | For this demonstration, I'll use Point to File.
| | 01:01 | Make sure that the file you want to
link to is visible in the Files panel.
| | 01:06 | I'll be linking to the
prebuilt form, explorerinsert2.php.
| | 01:11 | Click and drag the Point to File
tool and drop it onto the target file.
| | 01:15 | That creates the hyperlink.
| | 01:18 | Then I'll save and run the
page in an external browser.
| | 01:22 | If you followed these steps and
you're prompted to copy the file to the
| | 01:25 | testing server, say Yes.
| | 01:28 | In the page in the browser, here's my new link.
| | 01:30 | I'll click that link and that
takes me to the insert form.
| | 01:34 | And then I'll type some values.
| | 01:36 | I'll set the first name to New
and the last name to Explorer.
| | 01:41 | I'll set the date of birth to 12/23/1996.
| | 01:42 | I'll set the e-mail address of new@
explorer.com, I'll leave the address and city
| | 01:52 | blank and I'll set the state to California.
| | 01:56 | I'll click Submit, and that causes the
form to navigate back to the list page
| | 02:01 | and I'll see that my new data has been
inserted into the database successfully.
| | 02:06 | So an insert hyperlink is very simple.
| | 02:09 | You're just navigating to the form
that's going to do the insertion, and then in
| | 02:13 | the form's insert logic, you're
navigating back to the list page after the
| | 02:17 | data's been added to the database.
| | 02:19 | Editing data is a little bit more complex.
| | 02:22 | You'll need to add a hyperlink to
each row of the dynamic HTML table.
| | 02:27 | You can either create a new column
and create hyperlinks on a particular
| | 02:31 | word like Edit, or you can create
hyperlinks on existing data, such as the first name.
| | 02:36 | That's what I'll do.
| | 02:38 | I'll go back to Dreamweaver and then
I'll click on the first name column of the
| | 02:44 | rsExplorers record set.
| | 02:46 | You only need to click on this value;
| | 02:49 | you don't need to double-
click and you don't need to drag.
| | 02:52 | Then with the value selected, I'll go
down to the Properties panel, just like I
| | 02:55 | did for the insert link and
this time I'll use the Browse tool.
| | 02:59 | I'll click Browse for File,
in the correct site root.
| | 03:02 | In this case it should be 07_managingdata.
| | 03:06 | Then drill down to the explorers folder
and choose the prebuilt version of the
| | 03:11 | update form, explorerupdate2.php.
| | 03:15 | So that added a simple
hyperlink to the selected text.
| | 03:19 | But you can actually add logic to pass a
variable very easily from the Browse dialog.
| | 03:25 | I'll click the Browse button again and
then down toward the bottom of the dialog
| | 03:29 | I'll click the P arameters button.
| | 03:31 | In the Parameters button you add an
name and a value for each value that you
| | 03:36 | want to pass to the update form.
| | 03:38 | You must pass the primary key value
to the update form so that it knows
| | 03:42 | which record to display.
| | 03:44 | I'll set the name of the
parameter to explorerid, all lowercase.
| | 03:48 | Then I'll click in the Value column
and click the lightning bolt and then if
| | 03:52 | it's not already open I'll open up
the record set tree, and I'll choose the
| | 03:56 | primary key column explorerId.
| | 03:59 | I'll click OK, click OK again,
and click OK a third time.
| | 04:05 | Then I'll go to Code View and show
you the resulting generated code.
| | 04:10 | The HREF attribute starts with the name
of the file I'm navigating to and then
| | 04:15 | after a question mark passes the
variable named explorerid and sets its value to
| | 04:21 | the column explorerId.
| | 04:24 | Now one very important thing that
you have to check is that because PHP
| | 04:27 | variables are case-sensitive, you
must make sure that the variable that you
| | 04:31 | pass from this page matches the spelling of
the variable you're expecting in the target page.
| | 04:37 | So now I'll go to the Diles panel and
open explorerupdate2.php, and make sure
| | 04:43 | you're looking at it in Code View.
| | 04:46 | Then scroll down in the
file to lines 69 through 71.
| | 04:50 | This code was generated by Dreamweaver.
| | 04:53 | Notice that in Dreamweaver it matches
the name of the variable to the name of
| | 04:57 | the database column.
| | 04:58 | And if your database column has any
uppercase characters, it uses those.
| | 05:02 | I usually like to set all my
variables with all lowercase.
| | 05:06 | So to make sure that the two match, in
the isset function I'll set explored to
| | 05:11 | all lowercase there.
| | 05:13 | And then I'll do the
same thing on the next line.
| | 05:16 | So now the spelling of the variable in
the target file exactly matches the stone
| | 05:20 | of the variable in the sending file.
| | 05:24 | I'll save my changes in both files and
then just to be sure that they've both
| | 05:28 | been copied to the server, I'll go to
explorerupdate2.php and look at it in Live View.
| | 05:35 | It'll open up to default record, that is,
the record with a primary key value of one.
| | 05:41 | Then I'll exit Live View and I'll go
to explorerlists.php and I'll open this
| | 05:46 | file in the browser.
| | 05:48 | Now I should be able to click on any link,
and I should see this selected record.
| | 05:54 | I'll click on New for New Explorer.
| | 05:57 | And when the form opens it shows me that record.
| | 06:01 | I'll set the first name value from
New to Revised and I'll click Submit.
| | 06:07 | And when the form's logic is
completed I'm sent back to the list.
| | 06:11 | And I'll see that the data has been revised.
| | 06:14 | I'll also use this opportunity to fix
the first row of my data, which I had a
| | 06:18 | problem with in a previous exercise.
| | 06:21 | I'll click on Joey in Joey Adams and
I'll set the date of birth to 4/15/1993.
| | 06:29 | I'll click Submit, and when I return to the
list page, I see the data correctly display.
| | 06:35 | So that's a look at how to tie the
components of the data management system together.
| | 06:40 | From the list page you put in a simple
hyperlink that takes you to the insert
| | 06:44 | form and you also add in a dynamic
URL for each record that passes a query
| | 06:50 | string or a GET variable to the update form.
| | 06:54 | The update form then displays the
existing data, the user can make whatever
| | 06:58 | changes are required, and then when
they submit the changes they're saved to
| | 07:02 | the database.
| | Collapse this transcript |
| Using the Delete Record server behavior | 00:00 | The last step in creating a data
management system is to give the user a way to
| | 00:05 | delete data from the MySQL table.
| | 00:07 | I'll start this exercise by
creating a completely new file.
| | 00:12 | I'll select File > New and
then create a new blank PHP page.
| | 00:18 | I'll go into Code View, and I'm going
to delete all of the HTML in the page.
| | 00:23 | The user will never see this
page rendered in the browser.
| | 00:27 | It will execute a backend database
operation to delete a record and then
| | 00:31 | immediately return to the list page.
| | 00:36 | Then I'll save the file into the
same folder that contains my other data
| | 00:39 | management pages, and I'll
name it explorerdelete.php.
| | 00:45 | I'm going to add a server behavior.
| | 00:47 | I'll go to the Server Behaviors panel,
click plus, and choose Delete Record.
| | 00:54 | In the Delete Record dialog, I'll check my
Connection and then set the Table to Explorers.
| | 01:00 | I've accepted the settings for the
Primary key column and value, and then
| | 01:05 | indicate that after deleting, I
want to go to explorerlist.php.
| | 01:10 | When I click OK, all of the
required PHP code is added to the page.
| | 01:16 | Down at the bottom, PHP first checks to make
sure that I have a variable named explorerId,
| | 01:22 | a Get variable that will
be passed from another page.
| | 01:26 | It also makes sure that this
variable isn't blank, and then if that's all
| | 01:30 | true, it executes a deleteSQL
statement, removing the requested record from
| | 01:36 | the database table.
| | 01:37 | Down at the bottom, it sets a variable,
indicating which page we want to navigate
| | 01:41 | to, and then using this command,
header, sprintf, Location, deleteGoTo, it
| | 01:48 | redirects the browser to that page.
| | 01:51 | In the page's current state, watch
what happens if I browse it directly.
| | 01:54 | I'll run the page in the browser,
and I see that the page is blank.
| | 02:00 | The problem is with the logic.
| | 02:02 | If this condition in the 'if'
statement turns out to be false, PHP simply is
| | 02:07 | told, jump past all this
code and don't do anything.
| | 02:11 | To fix this, I'm going to take
everything starting with the setting of the
| | 02:15 | deleteGoTo variable, all the
way through the header command.
| | 02:18 | I'll cut it to the clipboard, and
then paste it after the closing brace for
| | 02:23 | the 'if' statement.
| | 02:24 | I'll then select most of the code and
press Shift+Tab and then do a little bit
| | 02:29 | more tabulation to make the code look right.
| | 02:33 | If the page is called directly from the
browser for some reason, instead of just
| | 02:37 | showing a blank page, it
will navigate to the list page.
| | 02:41 | So now my page is ready to delete records.
| | 02:43 | I am going to call this page from the list page.
| | 02:47 | I'll go to explorerlist.php
and look at it in Design View.
| | 02:53 | In Design View, I'll click and drag down to
select the entire final column in the table.
| | 02:59 | Then I'll right-click and choose
Table > Insert Rows or Columns.
| | 03:05 | Don't choose Insert Column here,
because it would insert a column before the
| | 03:09 | current selected column.
| | 03:11 | If I choose Insert Rows or Columns, I
have the option to insert a new column
| | 03:15 | either before or after the current column.
| | 03:17 | I will choose Columns, and one column
after the current column, and click OK.
| | 03:23 | Then I'll click into the
final column into the second row,
| | 03:27 | the row that contains the data,
and I'll type the word "Delete."
| | 03:32 | I'll select the word "Delete," and then
go to the Link box, and I'll browse and
| | 03:37 | select my new file, explorerdelete.php.
| | 03:41 | Now I'll go to Code View.
| | 03:44 | Just as with the Update command, I
need to pass a variable, which I'll name
| | 03:48 | explorerId, to the receiving page.
| | 03:51 | The easiest way to do this is to take
the existing code that I already put
| | 03:55 | into the Update command.
| | 03:57 | So I'll go to the explorerupdate2.php href.
| | 04:01 | I'll start with the question mark, and
I'll take everything through the output
| | 04:06 | of the explorerId column.
| | 04:08 | I'll copy that to the clipboard.
Then I'll go down to my new
| | 04:13 | explorerdelete.php href,
| | 04:16 | I'll right-click there, and paste.
| | 04:20 | I'm ready to test my delete operation.
| | 04:23 | I'll save and run the list page,
| | 04:26 | and when the list page is displayed,
it shows a delete item for each record
| | 04:30 | in the database table.
| | 04:32 | I'll click Delete for my
Revised Explorer record.
| | 04:35 | You will see that it
doesn't work quite right yet.
| | 04:38 | So, I am going to go back to my list
page, and I'm going to change the case of
| | 04:42 | the variable that I'm passing from
one page to another, so that it has an
| | 04:46 | uppercase I instead of a lowercase i.
| | 04:48 | I'll run the page in the browser again,
I'll click Delete, and now the record
| | 04:55 | is correctly removed.
| | 04:57 | It's important to match the case in
the variable name and in the code that's
| | 05:01 | looking for the variable in the Delete page.
| | 05:04 | So now you have the ability to insert new
records by clicking the Insert New Explorer link.
| | 05:09 | You have the ability to update
records by clicking on the First Name of any
| | 05:13 | record, and you also have the ability
to delete data from the MySQL database by
| | 05:18 | clicking on the Delete links.
| | 05:19 | Dreamweaver has generated most of the
PHP code we needed, but I have made minor
| | 05:25 | alterations, and along the way you've
learned a good bit about how to write PHP
| | 05:29 | code to manage data in a backend MySQL database.
| | Collapse this transcript |
|
|
8. Authenticating Users with PHPCreating a login form with a PHP server behavior | 00:00 | Web sites that allow users to manage
data on the backend - such as using Insert,
| | 00:05 | Update, and Delete operations -
frequently need to be authenticated.
| | 00:10 | Dreamweaver CS5 gives you the ability
to create simple login forms and then
| | 00:15 | protect your pages from unauthenticated users.
| | 00:18 | For all of the exercises in this
chapter, I'll use a version of the web site
| | 00:22 | stored in 08_authenticate
folder, under Exercise Files.
| | 00:27 | If you have access to the exercise
files, go into Dreamweaver site setup, and
| | 00:31 | point your site at this folder.
| | 00:34 | I'll start in this file, login.php, which you
will find in the login folder of the site root.
| | 00:40 | This file has a simple data
entry form with two controls:
| | 00:44 | User Name and Password.
| | 00:46 | Notice that both are wrapped
in Spry validation controls.
| | 00:51 | I'll run the page in the browser and
show you that if I try to submit the form
| | 00:55 | without entering any values, I'll
get client-side validation messages.
| | 01:00 | In order to use the form, I would need
to type in values and then compare those
| | 01:05 | values to the backend database.
| | 01:08 | Right now, the data entry form doesn't do
anything to work with the backend database.
| | 01:13 | If you look at the code, you'll find
that it's all either Cascading Style
| | 01:17 | Sheets or HTML code.
| | 01:19 | There is the inclusion of the Spry
validation, JavaScript, and Cascading Style
| | 01:23 | Sheets files, and another Cascading
Style Sheet file that controls the
| | 01:27 | appearance of the form,
| | 01:29 | but all of the work to collect the data
and compare the values to something in
| | 01:33 | the backend still has to be done.
| | 01:35 | I'll go back to Design View.
| | 01:38 | Before I apply the behaviors that are
going to execute the login functionality,
| | 01:44 | I'll first double-check my database connection.
| | 01:47 | I'll go to the Databases panel and
then double-click explorecalifornia.
| | 01:52 | If you're working with WampServer on
Windows, all these settings should be correct.
| | 01:58 | If you're working with MAMP on Mac OS
X, set the password to root, and then
| | 02:04 | test your database.
| | 02:06 | If you see this message on
Windows, click OK and test again.
| | 02:11 | Once you've seen the message that the
connection was made successfully, you can
| | 02:15 | click OK and click OK again, and
you'll be ready to work with your database.
| | 02:21 | To attach the form to the backend
database, go to the menu and choose Insert >
| | 02:27 | Data Objects > User Authentication.
| | 02:31 | There are four operations available: to
Log In and Log Out User, Restrict Access
| | 02:36 | To Page, and Check New Username.
| | 02:40 | I'll choose Log In User.
| | 02:42 | In the dialog that appears, I
indicate which form I want to get the
| | 02:46 | information from on the page,
| | 02:48 | and the names of the fields or
data entry controls in the form.
| | 02:52 | I've named my controls User Name and Password.
Then I indicate how I want to do the validation.
| | 02:58 | I'll select the explorecalifornia
connection, and set the Table to admin.
| | 03:05 | The admin table has three columns,
named adminId, userName, and Password.
| | 03:10 | adminId is a meaningless primary key.
| | 03:14 | I'm not going to use that.
| | 03:16 | I'll set the Username column to
userName and the Password column to password.
| | 03:22 | Now I'm going to define what
happens if the login succeeds or fails.
| | 03:26 | If I load the form page directly in
the browser, and the login succeeds, I'd
| | 03:31 | like the user to go to the web site's homepage.
| | 03:34 | So I'll click Browse, and then
I'll go to my site root folder.
| | 03:39 | If you are not sure whether you are
in the site root folder, just click the
| | 03:42 | button, Site Root. Then I'll locate and
select the file index.php and click OK.
| | 03:51 | If the Login form is loaded as a
result of an unsuccessful attempt to load a
| | 03:55 | protected page, after the login
operation is complete, I'd like to go to the
| | 04:00 | originally requested page,
known here as the previous URL.
| | 04:05 | To do that, all I have to do is check
the check box. And finally, if the login
| | 04:10 | fails, I want to go back
to the login form again.
| | 04:14 | So I'll click Browse and then from the
site root, I'll go to the login folder,
| | 04:20 | and I'll choose login.php.
| | 04:24 | You can restrict access to various pages of
your web site based on a user name and password.
| | 04:29 | That would mean that if the user logs in
at all, that they can get access to the
| | 04:33 | pages. Or you can also apply access levels.
| | 04:37 | I won't get into access levels here,
but it's worth noting that if you want to
| | 04:42 | use access levels, you need to
structure your database table to include a
| | 04:46 | numeric, or string value.
| | 04:49 | I've selected the default User Name
and Password, and now I'll click OK.
| | 04:55 | Before I test the page, let's take
a look at what's in the database.
| | 04:59 | I'll go to the Databases panel, to the
explorecalifornia connection, and open
| | 05:04 | the list of tables.
| | 05:06 | Here's the table that contains the
names and passwords for my users.
| | 05:11 | I'll right-click on the table, and
choose View data and show that the table
| | 05:15 | contains only one record.
| | 05:17 | The user name is explorerone,
and the password is password.
| | 05:23 | I'll click OK, and then I'll open
the page in the external browser.
| | 05:28 | If I don't type anything in, I'll get
client-side validation errors generated by
| | 05:33 | the Spry controls in the form.
| | 05:36 | If I type values in that aren't
recognized in the database, such as noname and
| | 05:41 | nopassword, and then click Submit,
the client-side validation errors are
| | 05:46 | cleared, but the login page is simply reloaded.
| | 05:50 | But then I'll type in the valid
values, explorerone as the User Name and
| | 05:57 | password in all lowercase, as the
password, and this time when I click Submit, I
| | 06:02 | am taken to the homepage of the web site.
| | 06:05 | So the data entry form is now designed
to collect the information from the user,
| | 06:10 | compare it to the contents of the
database, and then if the login operation
| | 06:15 | succeeds, to take the user to the homepage.
| | 06:19 | Once you've implemented the login form, you
can then start to protect the pages of
| | 06:23 | your web site one at a time, and I'll
show you how to do that in another video.
| | Collapse this transcript |
| Protecting page access with PHP server behaviors | 00:00 | Once you've created a login form for
your web site, you can then protect
| | 00:04 | individual pages so that only
users who have logged in can view them.
| | 00:09 | For this demonstration, I'll use the
file explorerlist.php in the explorers
| | 00:13 | folder, under the chapter 8 site root.
| | 00:17 | With the file open on the screen, I'll
go to the menu and choose Insert > Data
| | 00:21 | Objects > User Authentication.
| | 00:24 | From there, I'll choose Restrict Access To Page.
| | 00:28 | On this screen, I am asked to check
whether a user has already logged in.
| | 00:31 | You can either choose to protect based
on a username and password or a username,
| | 00:36 | password, and access level.
| | 00:38 | I'll use the default setting, and that
means that anybody who is logged in will
| | 00:42 | be able to view the page.
| | 00:44 | Then for users who haven't logged in,
I'll indicate which page I want them to see.
| | 00:49 | I'll browse, make sure I'm at the site
root, go to the login folder, and choose
| | 00:57 | my login form, login.php,
and then I'll click OK.
| | 01:01 | I'll save my changes, and
I'll run the page in the browser.
| | 01:08 | And now, instead of going to the page I
requested, I am sent to the Log In form.
| | 01:13 | If you're working on Mac and you're
having trouble previewing the file, go back
| | 01:17 | to the first video in this chapter and
make sure you followed the instructions for
| | 01:21 | updating your database connection.
| | 01:23 | It might be that you're having
trouble connecting to the database.
| | 01:26 | Let's take a look at the
code that was generated.
| | 01:29 | I'll go back to the page in
Dreamweaver and look at Code View.
| | 01:32 | Up at the top of the page, there is a
bunch of new PHP code. Here are some of
| | 01:37 | the critical pieces.
| | 01:39 | This conditional code block checks to
make sure that a session has been started.
| | 01:43 | The nature of a session is that it
tracks a particular user, as long as they
| | 01:48 | keep their browser open.
| | 01:50 | Information is passed from page to
page using something called a cookie.
| | 01:55 | You don't need to worry about how this
works; it's all handled automatically by
| | 01:59 | PHP and the browser.
| | 02:01 | But it is important to note that in PHP
any page that you need to protect or any
| | 02:07 | page that you need to put
information into the session must call the
| | 02:11 | session_start function.
| | 02:13 | Once that function has been called,
this session associative array known as
| | 02:18 | $_SESSION is created.
| | 02:20 | And so this expression is set,
$_SESSION returns true, if the session has
| | 02:26 | started and false if it hasn't been.
| | 02:30 | The rest of the code examines whether
the current user has logged in, and then
| | 02:34 | indicates with this variable, MM_
restrictGoTo, which page should be navigated
| | 02:39 | to if the login fails.
| | 02:42 | That's pretty much it.
| | 02:43 | If you want to apply this page
restriction to all of your pages, you could copy
| | 02:49 | this PHP code block, starting here at
line 2, and going down to the end of the
| | 02:55 | code block at line 46 into a separate
PHP file, and then you could include that
| | 03:01 | file in all of your other
pages throughout the web site.
| | 03:04 | I'm going to keep this demonstration
focused on a single page though, so that we
| | 03:08 | can see how the code that's generated by
Dreamweaver works in its default state.
| | 03:14 | Now, to complete the cycle,
I'll preview the page in Firefox.
| | 03:18 | And now, I am going to log in with my
user name and password, explorerone and
| | 03:24 | password, and I'll click Submit.
| | 03:28 | As long as I keep the browser open,
I'll be able to navigate around
| | 03:32 | throughout the web site.
| | 03:34 | I can go to the Insert form and back.
| | 03:37 | I can click Delete and delete a
record, and I can also update data.
| | 03:42 | If I close the browser though, and
then restart the page, I'll see that my
| | 03:47 | session has started over, and I
am sent back to the Log In form.
| | 03:51 | Again, you can either protect each
page individually, or you can take this
| | 03:55 | generated code that to remove your
places at the top of a page, move it into its
| | 04:00 | own PHP file and then include it in
all the pages that you want to protect.
| | 04:05 | The default behavior is that any
user who is logged in at all can see the
| | 04:09 | protected pages, but you can also apply
access levels, if you desire, to create a
| | 04:14 | more granular security model.
| | Collapse this transcript |
| Logging out with a PHP server behavior | 00:00 | In other videos in this chapter, I've
described how to build a login form and
| | 00:05 | compare values that the user
types in to values in the database,
| | 00:09 | and then I showed how to protect
various pages of your web site, so that
| | 00:13 | unauthenticated users can't see them.
| | 00:16 | Now, I'm going to show you how to
create a log out link that allows a user to
| | 00:20 | explicitly log out from the web site.
| | 00:23 | I'm working in the file explorerlist.php in
the explorers folder of the current site root.
| | 00:30 | When you create a log out operation,
you can either add a link to an existing
| | 00:34 | page, or you can create
an external log out page.
| | 00:38 | I'm going to use the first option,
| | 00:40 | adding a log out operation to a single page.
| | 00:44 | I'll scroll down in the page to the
Explorers section and click after the last
| | 00:48 | item under the Explorers menu, Video
Podcast. Then I'll go to Code View.
| | 00:54 | I'm going to add a new list
item after the video podcast.
| | 00:58 | I'll click after the ending tag for
</li>, and then I'll create a new <li> tag
| | 01:04 | set, and place the cursor between the tags.
| | 01:08 | Now I'm ready to create my log out operation.
| | 01:10 | I'll go to the menu and choose Insert > Data
Objects > User Authentication > Log Out User.
| | 01:19 | You can attach the log out operation
to any of the links in the page, or you
| | 01:24 | can create a new link.
| | 01:25 | I'll choose that option, creating
a new link with the text "log out."
| | 01:30 | If you were creating an external
separate log out page, you could instead select
| | 01:35 | the option to log out when the page
loads. Then you must select a page to go to
| | 01:40 | after the log out operation is complete.
| | 01:42 | I'll click Browse, go to the site root,
to the login folder, and I'll choose the
| | 01:48 | login form page login.php, and I'll click OK.
| | 01:54 | This page is already protected.
| | 01:56 | If I try to view it in the browser
directly, I'll be redirected to the login form.
| | 02:00 | So let's take a look at the
entire set of functionality.
| | 02:04 | I'll try to load the page in the
browser, and because it's protected, I'm taken
| | 02:08 | to the Log In form.
| | 02:10 | In the Log In form, I'll type in my
username and password, and I'll click
| | 02:15 | Submit, and I'm taken to the index page.
| | 02:19 | As long as I keep the browser open, I can
navigate around to all of the protected pages.
| | 02:24 | But here is my new Log Out link and
when I click it I'm logged out, and I am
| | 02:29 | returned back to my Log In form.
| | 02:32 | Once again, you can take a look at the
code that's generated by Dreamweaver,
| | 02:36 | and if you like, you can move it into
external pages and include it in others to
| | 02:40 | make it more reusable.
| | 02:42 | In this page, I now have some code at
the top that indicates how the login
| | 02:46 | operation will work.
| | 02:47 | The most critical part is this query string
variable, named doLogout, set to a value of true.
| | 02:54 | When I click on the link, that
variable is passed to the page, and then the
| | 02:58 | second time the page is loaded, as a
result of that variable existing and
| | 03:03 | being set to a value of true, all of the
operations needed to log the user out are executed.
| | 03:09 | A number of variables in the
session scope are cleared from memory.
| | 03:13 | And then there is line of code that
sets a variable, named logoutGoTo, which in
| | 03:17 | this case is set to my login form, and
finally, a call to the header function is
| | 03:22 | used to redirect the browser to the login form.
| | 03:26 | You can take all of that code, move
it to an external file, and then include
| | 03:30 | it in whatever pages you need it in, to make
the code more reusable throughout your web site.
| | 03:35 | This architecture allows you to easily create
a complete security system for your web site,
| | 03:40 | attaching it to the
information you store in your database.
| | 03:44 | Your database should have a table
containing user information, minimal username
| | 03:49 | and password, and optionally, access level,
and then you can design your security
| | 03:54 | model, integrating the database
with all the pages of your site.
| | Collapse this transcript |
|
|
9. Deploying a Dynamic Site to a Remote ServerConfiguring a remote server with FTP credentials| 00:00 | Once you've completed and tested your
PHP-based site on your local computer, you
| | 00:04 | can deploy it to your remote site.
| | 00:07 | I'll start by showing you how to
configure the remote site, and how to set it up
| | 00:11 | to work with the remote site
over FTP, or File Transfer Protocol.
| | 00:15 | For the purpose of this demonstration,
I'm using an FTP server called FileZilla.
| | 00:20 | It's a Windows-based, free FTP server
which you can get from the web, and it's
| | 00:25 | very easy to set up and install.
| | 00:28 | I've configured a single user on the server.
| | 00:31 | The name of the user is ftpuser, and
I'll show you that under Shared folders,
| | 00:37 | it's pointing to a folder
named remote, under my web root.
| | 00:41 | So for demonstration purposes, I'm
working with the same installation of
| | 00:44 | Apache, MySQL, and PHP, as I am for
my local server, but I'm pointing to a
| | 00:50 | different directory.
| | 00:52 | I'll close the User
configurationscreen in FileZilla and then minimize it
| | 00:56 | to keep it running.
| | 00:58 | Now, if you're working on Mac OS X,
you can instead use the FTP capability
| | 01:02 | that's built into that operating system.
| | 01:05 | Go into your System Preferences, to
Sharing, to File Sharing, and then under
| | 01:10 | Options, you'll be able to
turn on the FTP capability.
| | 01:13 | Or if you'd like to apply these
skills to an actual remote site, just get
| | 01:18 | the FTP credentials from your Internet
Service Provider, or your web server administrator.
| | 01:24 | I'm working with a site named 09_deployremote.
| | 01:29 | I'll go to the menu and choose Site >
Manage Sites, and then click Edit to look
| | 01:35 | at the Site preferences.
| | 01:38 | I'll go to the Servers category on the left.
| | 01:41 | When I first configured the site, I
created a local server definition.
| | 01:46 | Now I'm going to add a new server
definition for the remote server.
| | 01:50 | I'll click plus, and I'll
name this Remote Server.
| | 01:54 | You can connect using a variety of
protocols, but almost all the time you're
| | 01:58 | going to use FTP, or File Transfer Protocol.
| | 02:02 | The FTP Address can either be the DNS
name or the IP address of your remote server.
| | 02:08 | I'm going to use the IP address, 127.0.0.1.
| | 02:14 | Then I'll type in my username, ftpuser, and the
password that I created with it. Then I'll test.
| | 02:21 | If your FTP server is running, you
should connect to your server automatically.
| | 02:27 | If you have any troubles, the first
thing to try is to go into More Options and
| | 02:31 | try selecting Use Passive FTP,
and then click Test again.
| | 02:36 | If you're still having trouble, check
Adobe's web site. Go to the Dreamweaver
| | 02:41 | Support site, and type in connecting
with FTP, and you'll find a knowledge-based
| | 02:46 | article that should help.
| | 02:48 | My username is already connected to
the correct directory, so I don't need to
| | 02:52 | put any information here under Root Directory.
| | 02:55 | I'm also setting the web URL to point
to the remote folder under the localhost.
| | 03:01 | For a remote FTP server, you won't
use this value, but it's a good idea to
| | 03:05 | have it be accurate.
| | 03:06 | Then I'll click Advanced, and I'll
check to make sure that I have this option,
| | 03:11 | Maintain synchronization information, selected.
| | 03:14 | This will allow me to easily synchronize my
files between the client and the remote site.
| | 03:20 | And as with the testing server,
I'll set the Server model to PHP MySQL.
| | 03:27 | I'm not going to turn on the other options.
| | 03:29 | This one, Automatically upload files to
server on Save, will cause all changes
| | 03:34 | to be uploaded immediately upon saving them.
| | 03:37 | I typically don't like to do that.
| | 03:39 | You can, if you like, use
the file checkout capability.
| | 03:42 | This results in placing file locks on
files on your remote server, so that only
| | 03:47 | one user can check them out at a time.
| | 03:51 | I'll click Save, and then I'll check to
make sure that my new server is marked as
| | 03:55 | the remote server and not as the
resting server, and I'll click Save.
| | 04:00 | Then I'll click Done, and
I'll go to my Files panel.
| | 04:05 | Right now, I'm looking at the Local View,
| | 04:08 | that is the set of files that I've
been managing through Dreamweaver already.
| | 04:12 | I'll switch to the remote server and
show you that that folder is empty, and
| | 04:17 | I'll show you the physical folder
on the server, which on Windows is
| | 04:21 | wamp/www/remote, and show that it's
starting off as an empty file also.
| | 04:29 | If this folder doesn't already exist on
your local computer, you should create
| | 04:33 | it now, and then you'll be ready to
upload files to your server and synchronize
| | 04:37 | the files between the client and the
remote server whenever you need to.
| | Collapse this transcript |
| Synchronizing site assets with the remote server| 00:00 | Once you've configured and tested
your FTP connection, you can upload your
| | 00:04 | entire site to the remote server with a
single step in the Files panel, or from the menu.
| | 00:11 | I'll work primarily with the
Files panel in these exercises.
| | 00:15 | I'll go to the Files panel,
and I'll select the Site header.
| | 00:19 | This is the item in the tree at the
very top that shows the site name.
| | 00:23 | And then you can either right-click
on that item and choose Put, or you can
| | 00:28 | click the up arrow in the
toolbar, which means the same thing.
| | 00:32 | When I click the button, I'm asked
whether I want to put the entire site
| | 00:35 | onto the remote server.
| | 00:37 | I'll click OK, and I'll see that
the files are copied very quickly.
| | 00:42 | Now, I'm working with an FTP Server on
my local computer, and so the copying
| | 00:46 | is incredibly fast.
| | 00:47 | When you're working with an actual remote site,
you'll see that it takes quite a bit longer.
| | 00:53 | Now, to make sure that files have been
copied correctly, I'll go to the Files
| | 00:58 | panel and choose Remote Server, and I
see that all of the files and directories
| | 01:02 | have been successfully copied over.
| | 01:04 | Then I'll go back to the Local View.
| | 01:07 | You can also use synchronization.
| | 01:09 | When you synchronize, Dreamweaver
checks the file names and time-date stamps
| | 01:14 | for the files on the client and on the server,
and then tells you which files have to be copied.
| | 01:20 | I'll demonstrate this
with the file phpinfo.php.
| | 01:24 | I'll look at the code for this file.
| | 01:27 | It sets a time zone, indicates the
current time, and then outputs the result of
| | 01:32 | the phpinfo function.
| | 01:36 | I'm looking at the file in my testing site,
which is located in the dwwithphp folder.
| | 01:42 | I'll change this URL to indicate that
I want to look at the remote site, and
| | 01:47 | I'll see that the output is exactly the same.
| | 01:50 | It's two different copies of the page:
| | 01:52 | one stored on the testing server,
one stored on the remote server.
| | 01:57 | Now I'm going to make a change to the file.
| | 02:00 | I'll go to the code right before phpinfo,
and I'll type echo and then an h1 tag
| | 02:07 | wrapped in quotes, and then using a
period to concatenate, I'll append PHP Info,
| | 02:14 | another period, and then
in quotes a closing h1 tag.
| | 02:21 | I'll save my changes and run the page
in the browser using the Preview button,
| | 02:25 | and I'll see the new h1 tag appear,
and I'll note that I'm still working in
| | 02:30 | the testing server.
| | 02:32 | I'll change to the remote server, and I'll
see that that version doesn't have the change.
| | 02:37 | Now, I'll go back to Dreamweaver.
| | 02:39 | To synchronize, I'm going to
right-click on the site heading and
| | 02:43 | choose Synchronize.
| | 02:45 | You can also click on a button on the toolbar.
| | 02:46 | The Synchronize Files dialog box asks me
which direction I want to synchronize in.
| | 02:52 | The options are to put newer files to
remote, get newer files from remote, or to
| | 02:58 | do both Get and Put operations at the same time.
| | 03:01 | I'll choose the default,
putting newer files to remote.
| | 03:05 | I'll Preview, and after a very quick
moment, Dreamweaver indicates that the
| | 03:09 | phpinfo.php file is needed.
| | 03:13 | There is another file here that it picked
up that I don't want to put onto the site.
| | 03:17 | I'll click that, and then click the Ignore
button, which looks like a little stop sign.
| | 03:22 | I'll click OK, and the file is very
quickly copied to the remote site.
| | 03:27 | I'll switch back to the browser,
which is showing the PHP Info page on the
| | 03:32 | remote site, and I'll just refresh,
and I'll show that the change appears.
| | 03:38 | I now see the new text that I had
changed in the local site, because it has been
| | 03:42 | synchronized to the remote site.
| | 03:46 | When you use the synchronization
function, you can either do it for the entire
| | 03:49 | site, as I showed here, or you can do it for
one folder at a time, or one file at a time.
| | 03:56 | Just select the file, folders, or site
that you want to synchronize, and then
| | 04:00 | start the synchronization function.
| | 04:05 | It's also worth noting that in your
Exercise Files directory, you'll have a new
| | 04:09 | set of files, called dwsync.xml.
| | 04:13 | This file appears in the notes
subfolder of every physical folder of your site.
| | 04:19 | It's an XML file that tracks all of
the files in your site, and includes
| | 04:23 | information about the local copy, the
remote copy, and the date-time stamps
| | 04:29 | expressed as integer values, indicating
which version is which, and how they might differ.
| | 04:35 | The dwsync.xml file is used
by Dreamweaver to handle the
| | 04:39 | synchronization process.
| | 04:41 | If you have any troubles with
synchronization, you can simply wipe out the
| | 04:46 | dwsync.xml files from your entire structure.
| | 04:49 | Remember, there are multiple versions
of dwsync.xml, one in the notes subfolder
| | 04:54 | of every site folder.
| | 04:57 | After you've gotten rid of those XML
files, re-put everything onto your remote
| | 05:01 | site, and the synchronization
files will be recreated for you.
| | 05:06 | So that's a look at how to work
with the remote site using the FTP
| | 05:10 | capabilities of Dreamweaver CS5.
| | 05:13 | You can put files, folders, or the
entire site onto the remote site, or you can
| | 05:18 | synchronize, automatically detecting
changes in the local files, and copying
| | 05:24 | only those files to the remote site as needed.
| | Collapse this transcript |
| Exporting the MySQL database to a script| 00:00 | In addition to posting your php files
on your web site, you also need to create
| | 00:05 | a copy of your database on your remote server.
| | 00:08 | The particular installation of MySQL
will depend on how you're using your
| | 00:12 | server on the remote site.
| | 00:14 | In many cases, your database is
created for you by your Internet Service
| | 00:18 | Provider or by your web site manager,
but it's up to you to create an SQL script
| | 00:24 | that you can run to re-create
your database structure remotely.
| | 00:28 | In this video, I'll show you how to
create the script using phpMyAdmin.
| | 00:32 | If you're working with WampServer on
Windows, you can open up phpMyAdmin from
| | 00:36 | the admin menu. And if you're
working on MAMP on Mac OS X, go to the MAMP
| | 00:41 | homepage and then click phpMyAdmin.
From there, click into your database.
| | 00:47 | My database is named explorecalifornia and
then click Export at the top of the table list.
| | 00:54 | In the Export Screen, you're
asked which tables you want to export.
| | 00:57 | I'm going to select all of the tables.
Then there're some options you need to look at.
| | 01:02 | You'll want to output the SQL format -
that's the default - and then under Options,
| | 01:08 | click the option to add a
drop table view, and so on.
| | 01:13 | This means that when you run the script,
if a particular table structure already
| | 01:16 | exists, it will be replaced.
| | 01:19 | There are other options
that you might want to include.
| | 01:21 | For example, if you want a fresh,
clean database, you can uncheck the Data
| | 01:26 | option, and then you'll only get the
structure, or you can add the data option
| | 01:31 | and then go into the resulting SQL
script and make any changes you need to.
| | 01:36 | At the bottom of the screen, check Save
As file, and you'll be prompted when the
| | 01:40 | file is supposed to be saved. Click Go.
| | 01:44 | Now, depending on which browser
you're working in, you'll either see this
| | 01:48 | dialog, or you'll see that
the file is automatically saved.
| | 01:52 | I'm going to select Save File and click OK.
| | 01:56 | In Firefox, the file is
automatically created in your downloads folder.
| | 02:00 | If you're working with Internet
Explorer on Windows, you'll be prompted for the
| | 02:04 | location where you want to save the file.
| | 02:07 | Working in Firefox, I'll right-click
on the file reference, and choose Open
| | 02:11 | Containing Folder, and then from
there, I'll right-click and open the file.
| | 02:16 | I'm using TextPad, but you can
use whatever text editor you want.
| | 02:21 | The file will include all of the
data structure and actual data.
| | 02:25 | If you don't want to include actual data
in a table, there are two steps to follow.
| | 02:30 | First of all, go to the insert statements,
under the dumping data comment, and delete them.
| | 02:37 | And then, go back to the table
structure and change the auto increment value
| | 02:41 | from whatever it's set at to a value of
1, and that means when the first record
| | 02:46 | is inserted, the primary key value will be 1.
| | 02:49 | You can also make changes such as the
database engine, which is done on a per-
| | 02:52 | table basis and any other
changes that you want to make.
| | 02:56 | Once you've created the SQL file, save
it, and you'll be ready to move on to
| | 03:01 | the next step, importing the file
into your remote database, which I'll
| | 03:06 | describe in another video.
| | Collapse this transcript |
| Importing the MySQL database on a remote server| 00:00 | When you generate a script from
phpMyAdmin, it can be executed either in another
| | 00:05 | copy of phpMyAdmin or in any
other user interface for MySQL.
| | 00:11 | In most cases, if you're working with
an Internet Service Provider, you'll have
| | 00:15 | a copy of phpMyAdmin that you can use.
| | 00:18 | If you're working with an independent
copy of MySQL, you can download a copy of
| | 00:22 | the MySQL user interface tools from the
MySQL web site. The script should work
| | 00:27 | in that software as well.
| | 00:30 | Before you run the script on your
remote server, go into the script and make
| | 00:34 | any changes you need.
| | 00:35 | For example, I'm going to change the
name of my database from explorecalifornia,
| | 00:41 | the local name, to exploreremote.
| | 00:46 | Changing this comment doesn't have any
actual effect on the database itself.
| | 00:50 | You'll still create the database
manually in phpMyAdmin, but then you'll run the
| | 00:55 | script in phpMyAdmin against the new database.
| | 00:58 | I'll save the changes and close the text
editor, and then I'll go to phpMyAdmin.
| | 01:06 | Within phpMyAdmin, I'll create a new
database, and I'll name it exploreremote.
| | 01:13 | I'll click Create, and then I'll click
the Import button, and I'll navigate to
| | 01:18 | the location of MySQL file, which I've
placed in the exercise files area, under
| | 01:24 | the chapter for this folder, 09_deployremote.
| | 01:28 | And then the name of the
file is explorecalifornia.sql.
| | 01:33 | I'll select the file and click Go.
| | 01:36 | My new database now has the
structure and wherever I've left the insert
| | 01:40 | statements in the actual data.
| | 01:42 | For example, the admin table still has
the same username and password in its one
| | 01:48 | and only record, but the explorers table
is empty - that is, there is no data in
| | 01:53 | it, because in the SQL file, I
removed all the insert statements.
| | 01:58 | So, whether you move data in addition
to the structure is completely up to you.
| | 02:03 | For some tables, you might want to
include them in the script, and for others, you
| | 02:06 | might want to use a
completely fresh copy of the table.
| | 02:10 | So you've reproduced your database,
structure, and data on the remote site, and
| | 02:15 | now you're ready to work with it from
your remote web site, and I'll show you
| | 02:19 | how to configure your connections
file to do that in another video.
| | Collapse this transcript |
| Configuring the site for the remote database| 00:00 | Once you have deployed your database to
a remote server, you can configure your
| | 00:04 | Dreamweaver site so that when it's
running locally, it's talking to the local
| | 00:08 | database, and when it's working on the remote
site, it's working with the remote database.
| | 00:13 | To do this, you'll have to make some
customizations to your connections file.
| | 00:18 | In my web site, it's called
explorecalifornia.php, and these files are always
| | 00:23 | located in the Connections
folder, under the site root.
| | 00:26 | In the connections file, there
are four variables being set:
| | 00:30 | the hostname, the database name,
the username, and the password.
| | 00:36 | These settings currently
are for the local database.
| | 00:39 | Using a little bit of PHP conditional
code, you can detect where you are running,
| | 00:43 | and set the variables accordingly.
| | 00:45 | I will start in this demonstration by
doing little bit of debugging and showing
| | 00:50 | you some values that you can
inspect to find out where you are running.
| | 00:53 | I will use an echo command, and I will
output to values concatenated together.
| | 00:59 | The first is $_SERVER HTTP HOST.
| | 01:04 | This returns the name of the domain
that's accepting and processing the request.
| | 01:09 | Then I will put in a dot for
concatenation, and then I will output
| | 01:13 | $_SERVER
bracket REQUEST_URI.
| | 01:19 | This is the full name of the
page, as it's known to the browser.
| | 01:23 | Now I will save the changes and run the
page in the browser and show you that it
| | 01:28 | returns the name of the domain, in this
case local host, and then the full URI,
| | 01:35 | or Uniform Resource Identifier.
| | 01:37 | That includes all of the folders and
the file name that's being requested.
| | 01:42 | In this case, my local server is
running in the folder dwwithphp.
| | 01:47 | Now let's see what happens when I
am working on the remote server.
| | 01:50 | I will go back to Dreamweaver, and
I will go to the Files panel to the
| | 01:55 | Connections folder, and I will
put this file onto my server.
| | 01:58 | Then I will go back to the browser,
and I will replace the name with the
| | 02:02 | folder that I am using as my local
server with the name of folder I am using
| | 02:06 | as the remote server, remote, and I will see
that the same file returns a value of remote.
| | 02:13 | So for this demonstration, I am going
to look for the word "remote," and if I
| | 02:16 | find it, I will determine
that I am on a remote server.
| | 02:20 | When you are working with an actual
remote site, look for your domain name, or
| | 02:24 | your IP Address, because if that value
is a part of this string, that tells you
| | 02:29 | are working on the remote site.
| | 02:32 | Here is the PHP code I'll use to do the detection.
| | 02:34 | I will change this line of code, so
that instead of echoing this value, I will
| | 02:39 | save this value as a variable.
| | 02:40 | I will call it requesturi.
| | 02:47 | Then I will create a variable called
pos, standing for position, and I will get
| | 02:52 | the value of that variable by
calling a function called strpos.
| | 02:57 | The strpos function looks for
a substring within a string.
| | 03:02 | In the syntax example, you will see
that PHP refers to this as finding a
| | 03:06 | needle in a haystack.
| | 03:08 | So the first value I will
pass in is the haystack,
| | 03:11 | my variable requesturi, and then the
second value I will pass in is remote and
| | 03:18 | again, if you are working within
actual remote site, it might be
| | 03:21 | mycompany.com, the domain name.
| | 03:25 | The strpos function returns the
numeric position of the string that it finds.
| | 03:30 | Or if it doesn't find
anything, it returns a blank value.
| | 03:33 | You can determine whether the string
was found in the requesturi by asking
| | 03:38 | whether to pos variable returns true or false.
| | 03:42 | So I am going add an if clause.
| | 03:44 | I will create the if statement with a
pair of parentheses and an else statement,
| | 03:50 | also with a pair of parentheses.
| | 03:51 | Then I will take the four
variables that are being set.
| | 03:55 | I will cut them to the clipboard, and I
will paste them twice into both the if
| | 04:00 | clause and into the else clause.
| | 04:04 | Now I will apply a condition.
| | 04:07 | For the if clause, I will place the
cursor between the parentheses, and I will
| | 04:11 | simply type in the name of the variable, pos.
| | 04:14 | This expression will return true if
the value was found and false if it
| | 04:18 | wasn't. So the first condition is for
the remote site, not for the local, and I
| | 04:24 | am going to change the name of the
database from explorecalifornia to
| | 04:28 | exploreremote. And again, if you are
working on an actual remote site, you would
| | 04:33 | change all of these values:
| | 04:35 | the hostname, the database name,
the username, and the password.
| | 04:39 | In my case, all of the values are the
same except for the database itself.
| | 04:42 | I will save my changes, and I will go to
my site header, and I will synchronize.
| | 04:50 | This time I am going to click the
Synchronize button in the toolbar, just to
| | 04:53 | show you that that's an available workflow.
| | 04:55 | I will preview files that need to be
put onto the remote server, and I will see
| | 05:00 | that my connections file is eligible.
| | 05:02 | I will click OK, and that places the new
version of the file on the remote server.
| | 05:10 | Now I am going to open the file in
the Explorers folder, explorerlist.php.
| | 05:15 | You may remember that the difference
that I created between the local database
| | 05:19 | and the remote database is that I
removed all the data from the explorers table.
| | 05:24 | So I will open explorerlist.php,
and I will run it in the browser.
| | 05:33 | So right now, I am looking at
the login form for the local site.
| | 05:36 | I will login with User Name
explorerone and the Password, which is simply
| | 05:42 | password, and when I look at the
version of the list page on the local site, I
| | 05:48 | see all of the data.
| | 05:51 | Now I will go to the web address in
the browser, and I will change from the
| | 05:55 | local site, dwwithphp, to the
remote site in the remote folder.
| | 06:00 | If you are prompted to log in again, do so.
| | 06:03 | But then you should see the version of
the page on the remote site that shows
| | 06:07 | that there is nothing in the database,
that is that the explorers table is empty.
| | 06:11 | And that verifies that you are looking
at the version of the database that's
| | 06:15 | targeted for the remote site.
| | 06:18 | When you customize your connections file,
you should be aware that it may cause
| | 06:23 | some problems for Dreamweaver.
| | 06:24 | For example, if I now go to the
Databases panel and refresh, depending on the
| | 06:29 | state of your setup, you may or may not
be able to see the list of tables, and
| | 06:34 | you may or may not be able
to add new server behaviors.
| | 06:37 | If you have any trouble with this, I
recommend keeping a couple of different
| | 06:41 | copies of your connections file around,
and just rename them as needed when you
| | 06:45 | are doing your development work.
| | 06:47 | In this case, all of my development
work is complete, and I am simply deploying
| | 06:52 | my finished PHP site to my remote server,
and if I need to make any bug fixes or
| | 06:57 | add simple features to the site later on,
I will be able to easily do so using
| | 07:02 | this connections file that's been
customized to work with both the local and
| | 07:06 | the remote database.
| | Collapse this transcript |
|
|
ConclusionFinal thoughts| 00:00 | Thanks for sitting with me through this
video series; Dreamweaver with PHP and MySQL.
| | 00:06 | In this series, I showed you how to use
Dreamweaver to build a dynamic web site
| | 00:11 | that works with the PHP application
server and the MySQL database server.
| | 00:17 | I described how to structure and
populate a database, how to query and display
| | 00:22 | dynamic data in your web pages, how to
manage your data with data entry forms,
| | 00:27 | and how to create a secure
user authentication model.
| | 00:31 | I also showed how to integrate common
PHP-based libraries, such as the Zend
| | 00:37 | Framework with your dynamic pages.
| | 00:40 | You now have the tools to design, build,
and deploy your own dynamic web sites,
| | 00:45 | using Dreamweaver with PHP and MySQL.
| | 00:49 | Thanks again for watching and listening!
| | Collapse this transcript |
|
|
