PageRenderTime 47ms CodeModel.GetById 19ms RepoModel.GetById 0ms app.codeStats 0ms

/DevCenter/PHP/Tutorials/website-mysql-webmatrix.md

https://github.com/mattshel/azure-content
Markdown | 217 lines | 131 code | 86 blank | 0 comment | 0 complexity | 8ab1efdc8028291d3eba46291e755ff4 MD5 | raw file
  1. <properties linkid="develop-php-website-with-mysql-and-webmatrix" urlDisplayName="Web w/ WebMatrix" pageTitle="PHP web site with MySQL and WebMatrix - Windows Azure tutorial" metaKeywords="" metaDescription="A tutorial that demonstrates how to use the free WebMatrix IDE to create and deploy a PHP web site that stores data in MySQL." metaCanonical="" disqusComments="1" umbracoNaviHide="0" />
  2. <div chunk="../chunks/article-left-menu.md" />
  3. #Create and deploy a PHP-MySQL Windows Azure Web Site using WebMatrix
  4. This tutorial shows you how to use WebMatrix to develop and deploy a PHP-MySQL application to a Windows Azure Web Site. WebMatrix is a free web development tool from Microsoft that includes everything you need for web site development. WebMatrix supports PHP and includes intellisense for PHP development.
  5. This tutorial assumes you have [MySQL][install-mysql] installed on your computer so that you can test an application locally. However, you can complete the tutorial without having MySQL installed. Instead, you can deploy your application directly to Windows Azure Web Sites.
  6. Upon completing this guide, you will have a PHP-MySQL web site running in Windows Azure.
  7. You will learn:
  8. * How to create a Windows Azure Web Site and a MySQL database using the Preview Management Portal. Because PHP is enabled in Windows Azure Web Sites by default, nothing special is required to run your PHP code.
  9. * How to develop a PHP application using WebMatrix.
  10. * How to publish and re-publish your application to Windows Azure using WebMatrix.
  11. By following this tutorial, you will build a simple Tasklist web application in PHP. The application will be hosted in a Windows Azure Web Site. A screenshot of the running application is below:
  12. ![Windows Azure PHP Web Site][running-app]
  13. <div chunk="../../Shared/Chunks/create-account-and-websites-note.md" />
  14. ##Prerequisites
  15. 1. Download the Tasklist application files from here: [http://go.microsoft.com/fwlink/?LinkId=252506][tasklist-mysql-download]. The Tasklist application is a simple PHP application that allows you to add, mark complete, and delete items from a task list. Task list items are stored in a MySQL database. The application consists of these files:
  16. * **index.php**: Displays tasks and provides a form for adding an item to the list.
  17. * **additem.php**: Adds an item to the list.
  18. * **getitems.php**: Gets all items in the database.
  19. * **markitemcomplete.php**: Changes the status of an item to complete.
  20. * **deleteitem.php**: Deletes an item.
  21. * **taskmodel.php**: Contains functions that add, get, update, and delete items from the database.
  22. * **createtable.php**: Creates the MySQL table for the application. This file will only be called once.
  23. 2. Create a local MySQL database called `tasklist`. You can do this from the MySQL command prompt with this command:
  24. mysql> create database tasklist;
  25. This step is only necessary if you want to test your application locally.
  26. <h2 id="CreateWebsite">Create a Windows Azure Web Site and MySQL database</h2>
  27. 1. Login to the [Preview Management Portal][preview-portal].
  28. 2. Click the **+ New** icon on the bottom left of the portal.
  29. ![Create New Windows Azure Web Site][new-website]
  30. 3. Click **WEB SITE**, then **CREATE WITH DATABASE**.
  31. ![Custom Create a new Web Site][custom-create]
  32. <div class="dev-callout">
  33. <b>Note</b>
  34. <p>In the preview release of Windows Azure Web Sites, you cannot create a MySQL Database for a web site after creating the web site. You must create a web site and a MySQL database as described in the steps below.</p>
  35. </div>
  36. 4. Enter a value for **URL**, select **Create a New MySQL Database** from the **DATABASE** dropdown, and select the data center for your web site in the **REGION** dropdown. Click the arrow at the bottom of the dialog.
  37. ![Fill in web site details][website-details]
  38. 5. Enter a value for the **NAME** of your database, select the data center for your database in the **REGION** dropdown, and check the box that indicates you agree with the legal terms. Click the checkmark at the bottom of the dialog.
  39. ![Create new MySQL database][new-mysql-db]
  40. When the web site has been created you will see the text **Creation of Web Site [SITENAME] completed successfully**.
  41. Next, you need to get the MySQL connection information.
  42. 6. Click the name of the web site displayed in the list of web sites to open the web sites Quick Start page.
  43. ![Open web site dashboard][go-to-dashboard]
  44. 7. Click the **CONFIGURE** tab:
  45. ![Configure tab][configure-tab]
  46. 8. Scroll down to the **connection strings** section. The values for `Database`, `Data Source`, `User Id`, and `Password` are (respectively) the database name, server name, user name, and user password. Make note of the database connection information as it will be needed later.
  47. ![Connection string][connection-string]
  48. ##Install WebMatrix and develop your application
  49. You can install WebMatrix from the [Preview Management Portal][preview-portal].
  50. 1. After logging in, navigate to your web site's Quick Start page, and click the WebMatrix icon at the bottom of the page:
  51. ![Install WebMatrix][install-webmatrix]
  52. Follow the prompts to install WebMatrix.
  53. 2. After WebMatrix is installed, it will attempt to open your site as a WebMatrix project. When prompted to download your site, choose **Yes, install from the Template Gallery**.
  54. ![Download web site][download-site]
  55. 3. From the available templates, choose **PHP**.
  56. ![Site from template][site-from-template]
  57. 4. The **Empty Site** template will be selected by default. Provide a name for the site and click **NEXT**.
  58. ![Provide name for site][site-from-template-2]
  59. Your site will be opened on WebMatrix with some default files in place.
  60. In the next few steps you will develop the Tasklist application by adding the files you downloaded earlier and making a few modifications. You could, however, add your own existing files or create new files.
  61. 5. With your site open in WebMatrix, click **Files**:
  62. ![WebMatrix - Click files][site-in-webmatrix]
  63. 6. Add your application files by clicking **Add Existing**:
  64. ![WebMatrix - Add existing files][add-existing-files]
  65. In the resulting dialog, navigate to the files you downloaded earlier, select all of them, and click Open. When propted, choose to replace the `index.php` file.
  66. 7. Next, you need to add your local MySQL database connection information to the `taskmodel.php` file. Open the `taskmodel.php` file by double clicking it, and update the database connection information in the `connect` function. (**Note**: Jump to [Publish Your Application](#Publish) if you do not want to test your application locally and want to instead publish directly to Windows Azure Web Sites.)
  67. // DB connection info
  68. $host = "localhost";
  69. $user = "your user name";
  70. $pwd = "your password";
  71. $db = "tasklist";
  72. Save the `taskmodel.php` file.
  73. 8. For the application to run, the `items` table needs to be created. Right click the `createtable.php` file and select **Launch in browser**. This will launch `createtable.php` in your browser and execute code that creates the `items` table in the `tasklist` database.
  74. ![WebMatrix - Launch createtable.php in browser][webmatrix-launchinbrowser]
  75. 9. Now you can test the application locally. Right click the `index.php` file and select **Launch in browser**. Test the application by adding items, marking them complete, and deleting them.
  76. <h2 id="Publish">Publish your application</h2>
  77. Before publishing your application to Windows Azure Web Sites, the database connection information in `taskmodel.php` needs to be updated with the connection information you obtained earlier (in the [Create a Windows Azure Web Site and MySQL Database](#CreateWebsite) section).
  78. 1. Open the `taskmodel.php` file by double clicking it, and update the database connection information in the `connect` function.
  79. // DB connection info
  80. $host = "value of Data Source";
  81. $user = "value of User Id";
  82. $pwd = "value of Password";
  83. $db = "value of Database";
  84. Save the `taskmodel.php` file.
  85. 2. Click **Publish** in WebMatrix, then click **Continue** in the **Publish Preview** dialog.
  86. ![WebMatrix - Publish][publish]
  87. 3. Navigate to http://[your web site name].azurewebsites.net/createtable.php to create the `items` table.
  88. 4. Lastly, navigate to http://[your web site name].azurewebsites.net/index.php to being using the running application.
  89. ##Modify and republish your application
  90. You can easily modify and republish your application. Here, you will make a simple change to the heading in in the `index.php` file, and republish the application.
  91. 1. Open the `index.php` file by double-clicking it.
  92. 2. Change **My ToDo List** to **My Task List** in the **h1** tag and save the file.
  93. 3. Click the **Publish** icon, then click **Continue** in the **Publish Preview** dialog.
  94. 4. When publishing has completed, navigate to http://[your web site name].azurewebsites.net/index.php to see the published changes.
  95. # Next Steps
  96. You've seen how to create and deploy a web site from WebMatrix to Windows Azure. To learn more about WebMatrix, check out these resources:
  97. * [WebMatrix for Windows Azure](http://go.microsoft.com/fwlink/?LinkID=253622&clcid=0x409)
  98. * [WebMatrix web site](http://www.microsoft.com/click/services/Redirect2.ashx?CR_CC=200106398)
  99. [install-mysql]: http://dev.mysql.com/doc/refman/5.6/en/installing.html
  100. [running-app]: ../Media/tasklist_app_windows.png
  101. [tasklist-mysql-download]: http://go.microsoft.com/fwlink/?LinkId=252506
  102. [install-webmatrix]: ../Media/install-webmatrix.png
  103. [download-publish-profile]: ../../Shared/Media/download_publish_profile.jpg
  104. [webmatrix-templates]: ../../Shared/Media/webmatrix_templates.jpg
  105. [webmatrix-php-template]: ../../Shared/Media/webmatrix_php_template.jpg
  106. [webmatrix-php-emptysite]: ../../Shared/Media/webmatrix_php_emptysite.jpg
  107. [webmatrix-files]: ../../Shared/Media/webmatrix_files.jpg
  108. [webmatrix-delete-indexphp]: ../../Shared/Media/webmatrix_delete_indexphp.jpg
  109. [webmatrix-add-existing]: ../../Shared/Media/webmatrix_add_existing.jpg
  110. [webmatrix-launchinbrowser]: ../Media/launch-in-browser.png
  111. [webmatrix-publish]: ../../Shared/Media/webmatrix_publish.jpg
  112. [webmatrix-import-pub-settings]: ../../Shared/Media/webmatrix_import_pub_settings.jpg
  113. [webmatrix-pubcompat-continue]: ../../Shared/Media/webmatrix_pubcompat_continue.jpg
  114. [webmatirx-pubpreview]: ../../Shared/Media/webmatrix_pubpreview.jpg
  115. [preview-portal]: https://manage.windowsazure.com
  116. [php-site-from-template]: ../../Shared/Media/php_site_from_template.png
  117. [php-empty-site-template-installed]: ../../Shared/Media/php_empty_site_template_installed.png
  118. [new-website]: ../../Shared/Media/new_website.jpg
  119. [custom-create]: ../Media/custom_create.jpg
  120. [website-details]: ../../Shared/Media/website_details.jpg
  121. [new-mysql-db]: ../Media/new_mysql_db.jpg
  122. [go-to-dashboard]: ../Media/go_to_dashboard.jpg
  123. [download-publish-profile]: ../Media/download-publish-profile.png
  124. [download-site]: ../Media/download-site-1.png
  125. [site-from-template]: ../Media/site-from-template.png
  126. [site-from-template-2]: ../Media/site-from-template-2.png
  127. [site-in-webmatrix]: ../Media/site-in-webmatrix.png
  128. [add-existing-files]: ../Media/add-existing-files.png
  129. [publish]: ../Media/publish.png
  130. [configure-tab]: ../Media/configure-tab.png
  131. [connection-string]: ../Media/connection-string.png