دنیای پروژه

جزئیات محصول

دانلود پروژه کاربردی سیستم ثبت رکورد محصولات با استفاده از JavaScript و کد منبع

دانلود پروژه کاربردی سیستم ثبت رکورد محصولات با استفاده از JavaScript و کد منبع

قیمت: 35,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

  کاربران گرامی در این پروژه به شما پروژه کاربردی  با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر  پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه  های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد



### پروژه: سیستم ثبت رکورد محصولات با استفاده از JavaScript و کد منبع
 
**سیستم ثبت رکورد محصولات** یک پروژه کاربردی است که به کاربران امکان می‌دهد محصولات خود را ثبت و مدیریت کنند. این پروژه به زبان **JavaScript** نوشته شده و شامل HTML و CSS نیز می‌شود. هدف این سیستم ایجاد یک رابط کاربری ساده برای ثبت، مشاهده، و حذف اطلاعات محصولات است.
 
### ویژگی‌های پروژه
1. **ثبت محصولات**: کاربران می‌توانند نام، قیمت و توضیحات محصول را وارد کنند.
2. **نمایش لیست محصولات**: تمامی محصولات ثبت شده در یک لیست نمایش داده می‌شوند.
3. **حذف محصولات**: کاربران می‌توانند محصولات را از لیست حذف کنند.
4. **استفاده از Local Storage**: اطلاعات محصولات در Local Storage مرورگر ذخیره می‌شود تا بعد از بارگذاری مجدد صفحه نیز قابل دسترسی باشد.
 
### ساختار پروژه
 
#### 1. فایل HTML (index.html)
```html
   
   
    سیستم ثبت رکورد محصولات
   
   
       

سیستم ثبت رکورد محصولات

       
           
           
           
           
       
       

لیست محصولات

       
       
       
    ```
     
    #### 2. فایل CSS (style.css)
    ```css
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        text-align: center;
    }
     
    .container {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #333;
        border-radius: 10px;
        background-color: #fff;
    }
     
    form {
        margin-bottom: 20px;
    }
     
    input, textarea {
        width: 100%;
        padding: 10px;
        margin: 5px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
     
    button {
        padding: 10px 15px;
        background-color: #28a745;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
     
    button:hover {
        background-color: #218838;
    }
     
    ul {
        list-style-type: none;
        padding: 0;
    }
     
    li {
        background-color: #e9ecef;
        margin: 10px 0;
        padding: 10px;
        border-radius: 5px;
    }
    ```
     
    #### 3. فایل JavaScript (script.js)
    ```javascript
    document.getElementById('product-form').addEventListener('submit', addProduct);
     
    function addProduct(e) {
        e.preventDefault(); // جلوگیری از ارسال فرم
     
        const name = document.getElementById('product-name').value;
        const price = document.getElementById('product-price').value;
        const description = document.getElementById('product-description').value;
     
        const product = {
            name,
            price,
            description
        };
     
        let products = JSON.parse(localStorage.getItem('products')) || [];
        products.push(product);
        localStorage.setItem('products', JSON.stringify(products));
     
        document.getElementById('product-form').reset();
        displayProducts();
    }
     
    function displayProducts() {
        const products = JSON.parse(localStorage.getItem('products')) || [];
        const productList = document.getElementById('product-list');
        productList.innerHTML = '';
     
        products.forEach((product, index) => {
            const li = document.createElement('li');
            li.innerHTML = `
                ${product.name} - ${product.price} تومان
               

    ${product.description}

               
            `;
            productList.appendChild(li);
        });
    }
     
    function removeProduct(index) {
        let products = JSON.parse(localStorage.getItem('products'));
        products.splice(index, 1);
        localStorage.setItem('products', JSON.stringify(products));
        displayProducts();
    }
     
    // بارگذاری محصولات هنگام بارگذاری صفحه
    window.onload = displayProducts;
    ```
     
    ### توضیحات کد:
    - **HTML**: فرم ثبت محصولات و نمایش لیست محصولات.
    - **CSS**: طراحی ساده و کاربرپسند.
    - **JavaScript**: منطق ثبت، نمایش و حذف محصولات با استفاده از Local Storage.
     
    ### نحوه اجرای پروژه
    1. **دانلود پروژه**: فایل‌های پروژه را از لینک مربوطه دانلود کنید.
    2. **اجرای پروژه**: با باز کردن فایل `index.html` در مرورگر خود، می‌توانید سیستم ثبت رکورد محصولات را آغاز کنید.
     
    ### جمع‌بندی
    سیستم ثبت رکورد محصولات یک پروژه مفید برای یادگیری کار با **JavaScript** و مدیریت داده‌ها است. این پروژه می‌تواند به راحتی گسترش یابد و ویژگی‌های جدیدی مانند ویرایش محصولات یا جستجو در بین محصولات به آن اضافه شود. این سیستم به کاربران کمک می‌کند تا با اصول مدیریت داده‌ها و تعاملات کاربری آشنا شوند.
    | صفحه قابل مشاهده: دانلود پروژه کاربردی سیستم ثبت رکورد محصولات با استفاده از JavaScript و کد منبع می‌باشد