transfer-files-ftp.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <!-- Always force latest IE rendering engine or request Chrome Frame -->
  6. <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <!-- Use title if it's in the page YAML frontmatter -->
  9. <title>Configure FTP Access</title>
  10. <link href="/dashboard/stylesheets/normalize.css" rel="stylesheet" type="text/css" /><link href="/dashboard/stylesheets/all.css" rel="stylesheet" type="text/css" />
  11. <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  12. <script src="/dashboard/javascripts/modernizr.js" type="text/javascript"></script>
  13. <link href="/dashboard/images/favicon.png" rel="icon" type="image/png" />
  14. </head>
  15. <body class="docs docs_transfer-files-ftp">
  16. <div id="fb-root"></div>
  17. <script>(function(d, s, id) {
  18. var js, fjs = d.getElementsByTagName(s)[0];
  19. if (d.getElementById(id)) return;
  20. js = d.createElement(s); js.id = id;
  21. js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=277385395761685";
  22. fjs.parentNode.insertBefore(js, fjs);
  23. }(document, 'script', 'facebook-jssdk'));</script>
  24. <div class="contain-to-grid">
  25. <nav class="top-bar" data-topbar>
  26. <ul class="title-area">
  27. <li class="name">
  28. <h1><a href="/dashboard/index.html">Apache Friends</a></h1>
  29. </li>
  30. <li class="toggle-topbar menu-icon">
  31. <a href="#">
  32. <span>Menu</span>
  33. </a>
  34. </li>
  35. </ul>
  36. <section class="top-bar-section">
  37. <!-- Right Nav Section -->
  38. <ul class="right">
  39. <li class=""><a href="/applications.html">Applications</a></li>
  40. <li class=""><a href="/dashboard/faq.html">FAQs</a></li>
  41. <li class="active"><a href="/dashboard/howto.html">HOW-TO Guides</a></li>
  42. <li class=""><a target="_blank" href="/dashboard/phpinfo.php">PHPInfo</a></li>
  43. <li class=""><a href="/phpmyadmin/">phpMyAdmin</a></li>
  44. </ul>
  45. </section>
  46. </nav>
  47. </div>
  48. <div id="wrapper">
  49. <div class="hero">
  50. <div class="row">
  51. <div class="large-12 columns">
  52. <h1>Documentation</h1>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="row">
  57. <div class="large-12 columns">
  58. <ul class="sub-nav">
  59. <li>
  60. <a class="pdf" target="_blank" href="/dashboard/docs/transfer-files-ftp.pdf"> Download PDF
  61. <span>transfer-files-ftp.pdf</span>
  62. </a> </li>
  63. </ul>
  64. <article class="asciidoctor">
  65. <h1>Configure FTP Access</h1>
  66. <div class="paragraph">
  67. <p>XAMPP includes the server version of <a href="https://filezilla-project.org/">FileZilla</a>, an open-source FTP solution. This makes it easy to transfer files to and from a XAMPP environment using FTP.</p>
  68. </div>
  69. <div class="paragraph">
  70. <p>To illustrate, assume that you have a simple PHP script named <em>example.php</em> on your Windows desktop containing the following code, that you wish to transfer to the XAMPP server.</p>
  71. </div>
  72. <div class="literalblock">
  73. <div class="content">
  74. <pre>&lt;!-- example.php --&gt;
  75. &lt;html&gt;
  76. &lt;head&gt;&lt;/head&gt;
  77. &lt;body&gt;
  78. &lt;h2&gt;&lt;?php echo "Hello. Today is " . date('l'); ?&gt;.&lt;/h2&gt;
  79. &lt;/body&gt;
  80. &lt;/html&gt;</pre>
  81. </div>
  82. </div>
  83. <div class="paragraph">
  84. <p>To transfer files using FTP, you must first configure the FileZilla FTP server. Follow the steps below.</p>
  85. </div>
  86. <div class="olist arabic">
  87. <ol class="arabic">
  88. <li>
  89. <p>Ensure that FileZilla is running.</p>
  90. </li>
  91. <li>
  92. <p>Start the FileZilla administration interface by clicking the "Admin" button in the XAMPP control panel.</p>
  93. <div class="imageblock">
  94. <div class="content">
  95. <img src="./images/transfer-files-ftp/image1.png" alt="image1">
  96. </div>
  97. </div>
  98. </li>
  99. <li>
  100. <p>In the resulting "Connect to Server" dialog box, leave all values at their default values and click "OK".</p>
  101. <div class="imageblock">
  102. <div class="content">
  103. <img src="./images/transfer-files-ftp/image2.png" alt="image2">
  104. </div>
  105. </div>
  106. <div class="paragraph">
  107. <p>You should now arrive at the FileZilla server console.</p>
  108. </div>
  109. <div class="imageblock">
  110. <div class="content">
  111. <img src="./images/transfer-files-ftp/image3.png" alt="image3">
  112. </div>
  113. </div>
  114. </li>
  115. <li>
  116. <p>You now need to set up at least one FTP user. To do this, click the "Edit &#8594; Users" menu item. This will bring you to the user management interface.</p>
  117. <div class="imageblock">
  118. <div class="content">
  119. <img src="./images/transfer-files-ftp/image4.png" alt="image4">
  120. </div>
  121. </div>
  122. </li>
  123. <li>
  124. <p>Click the "Add" button to add a new user account. Enter a name for the new user account.</p>
  125. <div class="imageblock">
  126. <div class="content">
  127. <img src="./images/transfer-files-ftp/image5.png" alt="image5">
  128. </div>
  129. </div>
  130. </li>
  131. <li>
  132. <p>Select and check the "Password" field and enter a password for the new user.</p>
  133. <div class="imageblock">
  134. <div class="content">
  135. <img src="./images/transfer-files-ftp/image6.png" alt="image6">
  136. </div>
  137. </div>
  138. </li>
  139. <li>
  140. <p>Next, you need to define which folders the user has access to. To do this, click the "Shared folder" sub-item in the left navigation menu.</p>
  141. </li>
  142. <li>
  143. <p>Click the "Add" button and select the <em>htdocs\</em> subdirectory of the XAMPP installation directory as the user&#8217;s home directory.</p>
  144. <div class="imageblock">
  145. <div class="content">
  146. <img src="./images/transfer-files-ftp/image7.png" alt="image7">
  147. </div>
  148. </div>
  149. </li>
  150. <li>
  151. <p>Grant the user all available rights to this directory.</p>
  152. <div class="imageblock">
  153. <div class="content">
  154. <img src="./images/transfer-files-ftp/image8.png" alt="image8">
  155. </div>
  156. </div>
  157. </li>
  158. <li>
  159. <p>Click "OK" to save your changes.</p>
  160. </li>
  161. <li>
  162. <p>Use the "File &#8594; Quit" menu item to disconnect from the FileZilla administration interface.</p>
  163. </li>
  164. </ol>
  165. </div>
  166. <div class="paragraph">
  167. <p>You can now transfer files to the XAMPP server by following the steps below:</p>
  168. </div>
  169. <div class="olist arabic">
  170. <ol class="arabic">
  171. <li>
  172. <p>Launch your FTP client and enter connection details as below.</p>
  173. <div class="ulist">
  174. <ul>
  175. <li>
  176. <p>If you’re connecting to the server from the same system, use "127.0.0.1" as the host address. If you’re connecting from a different system, use the network hostname or IP address of the XAMPP server.</p>
  177. </li>
  178. <li>
  179. <p>Use "21" as the port.</p>
  180. </li>
  181. <li>
  182. <p>Specify the username and password configured previously as your FTP credentials.</p>
  183. </li>
  184. </ul>
  185. </div>
  186. <div class="paragraph">
  187. <p>Your FTP client should now connect to the server and enter the <em>C:\xampp\htdocs</em> directory, which is the default Web server document root.</p>
  188. </div>
  189. <div class="imageblock">
  190. <div class="content">
  191. <img src="./images/transfer-files-ftp/image9.png" alt="image9">
  192. </div>
  193. </div>
  194. </li>
  195. <li>
  196. <p>Transfer the file from your home directory to the server using normal FTP transfer conventions. If you’re using a graphical FTP client, you can usually drag and drop the file from one directory to the other. If you’re using a command-line FTP client, you can use the FTP PUT command.</p>
  197. <div class="imageblock">
  198. <div class="content">
  199. <img src="./images/transfer-files-ftp/image10.png" alt="image10">
  200. </div>
  201. </div>
  202. </li>
  203. <li>
  204. <p>Once the file is successfully transferred, you should be able to see it in action by browsing to <a href="http://localhost/example.php" class="bare">http://localhost/example.php</a>, as shown below:</p>
  205. <div class="imageblock">
  206. <div class="content">
  207. <img src="./images/transfer-files-ftp/image11.png" alt="image11">
  208. </div>
  209. </div>
  210. </li>
  211. </ol>
  212. </div>
  213. </article>
  214. </div>
  215. </div>
  216. </div>
  217. <footer>
  218. <div class="row">
  219. <div class="large-12 columns">
  220. <div class="row">
  221. <div class="large-8 columns">
  222. <ul class="social">
  223. <li class="twitter"><a href="https://twitter.com/apachefriends">Follow us on Twitter</a></li>
  224. <li class="facebook"><a href="https://www.facebook.com/we.are.xampp">Like us on Facebook</a></li>
  225. <li class="google"><a href="https://plus.google.com/+xampp/posts">Add us to your G+ Circles</a></li>
  226. </ul>
  227. <ul class="inline-list">
  228. <li><a href="https://www.apachefriends.org/blog.html">Blog</a></li>
  229. <li><a href="https://www.apachefriends.org/privacy_policy.html">Privacy Policy</a></li>
  230. <li>
  231. <a target="_blank" href="http://www.fastly.com/"> CDN provided by
  232. <img width="48" data-2x="/dashboard/images/fastly-logo@2x.png" src="/dashboard/images/fastly-logo.png" />
  233. </a> </li>
  234. </ul>
  235. </div>
  236. <div class="large-4 columns">
  237. <p class="text-right">Copyright (c) 2017, Apache Friends</p>
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. </footer>
  243. <!-- JS Libraries -->
  244. <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  245. <script src="/dashboard/javascripts/all.js" type="text/javascript"></script>
  246. </body>
  247. </html>